开发者问题收集

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

2017-08-03
6252
react-native react-navigation

我正在尝试创建一个小型应用程序，但有很多问题） 我有 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) 时，我收到一个错误，即 screen2 需要从 screen1 传递的数据。是的 - 我已经检查过当按下“后退”按钮时这些数据是否传递给 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 不是函数”

1个回答

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

父母 

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>
    }
}
milkersarac
2017-08-03