react-native 与 react-navigation 和 redux [跨屏幕传输状态]答案

【问题标题】：react-native with react-navigation and redux [transfer state across screen]react-native 与 react-navigation 和 redux [跨屏幕传输状态]
【发布时间】：2018-02-19 06:00:39
【问题描述】：

我是 react-native 及其所有库的新手。

我正在尝试使用 react-redux 将 InputText 的内容传递到下一个屏幕，但我不确定如何正确执行。文档太冗长，只是解释理论，没有任何实际意义。

我的 StackNavigator 中有 2 个屏幕，如下所示：

const StackNav = StackNavigator({
  SignName: { screen: SignNameScreen},
  SignBday: { screen: SignBdayScreen}
})

SignNameScreen 和 SignBdayScreen 中的每一个都只有 TextInput，我只想让用户在屏幕上输入。

class SignNameScreen extends Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  handleNext() {
    Alert.alert("handle button next pressed")
//     navigate("SignBday")
  }
  handleOnPress() {
    Alert.alert("handle button login pressed")
  }
  submitFunc = () => {
    const payload = {
      email: this.email,
      password: this.password
    }
    console.log(payload)
    Alert.alert("hello: " + payload.email)
  }
  render() {
    return (
      <View style={{flex: 1, flexDirection: 'column', justifyContent: 
'space-around'}}>
        <TextInput placeholder="first name"
          onChangeText={(text) => this.firstname = text}/>
        <TextInput placeholder="last name"
          onChangeText={(text) => this.lastname = text}/>
      <Button 
        title="Next"
//         onPress={this.handleNext} // this doesnt work, the function cannot access props
        onPress={() => {this.props.navigation.navigate("SignBday")}}
      />
      </View>
    );
  }
}

我尝试了各种方法，例如创建reducer、使用connect 导出类等，但一切都破坏了代码。请有人指出我正确的方向吗？

我从 github 尝试了许多示例项目，但由于各种节点问题，它们要么无法构建，要么无法运行。抱歉，javascript 也是我的弱点。

非常感谢您的帮助。

【问题讨论】：

您可以在导航时将其作为参数传递

标签： javascript react-native react-redux react-navigation

【解决方案1】：

这样导航

onPress={() => this.props.navigation.navigate('SignBday', { 'Param_Name': 'Param_Value' })}

然后像这样在另一个屏幕中获取参数

const { params } = this.props.navigation.state;

要在下一个屏幕中获取参数的值，请使用

params.Param_Name

【讨论】：

【解决方案2】：

这真的取决于应用程序，如果它是一个状态较少的简单应用程序，那么你可能不需要使用 Redux。

没有redux。你需要像这样传递它。

this.props.navigation.navigate('NewPage',{ paramKey: paramValue })

然后在另一个页面上检索它，比如

const {params} = this.props.navigation.state;

还要确保您对给定组件具有导航访问权限。

Redux 稍微复杂一些。

你需要一些设置和一个动作和减速器，就像 here 和 here 所做的那样。

祝你好运！

【讨论】：