react-native with react-navigation和redux [跨屏幕传输状态]

时间:2017-09-11 04:26:17

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

我是反应原生及其所有库的新手。

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

我的StackNavigator中有两个屏幕,如下所示:

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

SignNameScreenSignBdayScreen中的每一个都只有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也是我的弱点。

非常感谢你的帮助。

The screenshot

2 个答案:

答案 0 :(得分:2)

像这样导航

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

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

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

要在下一个屏幕中获取参数值

params.Param_Name

答案 1 :(得分:1)

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

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

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

并在另一个页面上检索它,如

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

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

Redux有点复杂。

您需要一些设置以及操作和缩减器,例如完成herehere的操作。

古德勒克!