React Native：在屏幕之间传递数据

Question

我正在尝试创建一个小应用程序，但有很多问题）我有 3 个屏幕并使用反应导航来传递数据。该方案如下：

1) loading screen (fetch data and save it to AsyncStorage+handling data and save to obj1 for pickers)
(pass obj1)
2)main screen (get data,render pickers based on it, take selected values and pass them next)
(pass pickers selection+input)
3)some results(get data from Asyncstorage, some calculating and render results)

所以我有两个问题。

当我从 3) 导航回 2) 时出现错误，屏幕 2 需要从屏幕 1 传递的数据。是的 - 我已经检查了当按下后退按钮时这个数据是否传递给 3 然后传递给 2，并且没有错误，但我确信这是一个糟糕的解决方案

第二个..试图解释）在屏幕 3 上对选择器选择进行了一些计算，所以没有问题。但其余的需要从 AsyncStorage 获取数据，然后根据 Picker 值将其转换并呈现给 ListView。尽管我将从 AS 获取到 componentWillMount 上，但它仍然需要很多时间，因此用于渲染的数据是未定义的。当然我使用的是状态，但我认为这是一个糟糕的数据处理逻辑..

更新所以我正在尝试将数据从子（屏幕）传递到父（index.ios.js），它定义为第一个加载视图（我正在使用导航器的堆栈屏幕）

export default class App extends Component {
  constructor(props) {
      super(props);

      };
  }
  myCallback(dataFromChild) {
      console.log("yeah", dataFromChild);

  }

  render() {
    return (
      <LoadingScreen callbackFromParent={this.myCallback}/>
    );
  }
}

和LoadingScreen.js：

render() {
    return(
        <View style={{flex: 1, backgroundColor: '#dc143c', marginTop:20}}>
          <Image
              source={require('./WhiteLogo.png')}
              style={{flex:3, height: undefined, width: undefined, marginLeft:20, marginRight:20}}
              resizeMode="contain"
              qwer={this.props.callbackFromParent('listInfo').bind(this)}
            />
          <Spinner color='white' style={{flex:1}}/>
        </View>
   );
  }
}

我遇到了一个错误 "Unhandled JS Exception: this.props.callbackFromParent is not a function"

Answer 1

AsyncStorage 可能不是您正在尝试的最佳解决方案。使用 react-navigation 进行数据传输也不是最好的。我建议检查 redux 以全局存储状态并在需要时将其传递到页面。还有另一种方法是将函数传递给 child 组件的 props，以将任何数据从 child 提取到 parent 组件。您可以检查this and this或下面的示例代码。

Parent

class Parent extends Component {
    updateState (data) {
        this.setState(data);
    }
    render() {
        <View>
            <Child updateParentState={this.updateState.bind(this)} />
        </View>
    }
}

Child

class Child extends Component {    
    render() {
      <View>
        <Button title="Change" onPress={() => {this.props.updateParentState({name: 'test})}} />
      </View>
    }
}

React Native：在屏幕之间传递数据

React Native: passing data between screens

react-native

react-navigation