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

Question

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

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 ，但它仍然需要很多时间，因此用于渲染的数据是未定义的。当然我正在使用状态，但我认为这是一个糟糕的数据处理逻辑..

UPD 所以我正在尝试将数据从子（屏幕）传递到父（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>
   );
  }
}

我收到一个错误“未处理的 JS 异常：this.props.callbackFromParent 不是函数”

Answer 1

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

家长

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

儿童

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