[英]react-native with react-navigation and redux [transfer state across screen]
I am new to react-native and all its libraries. 我是react-native及其所有库的新手。
I am trying to get my InputText's content across to the next screen using react-redux, but I am not sure how to do it properly. 我正在尝试使用react-redux将InputText的内容传递到下一个屏幕,但是我不确定如何正确地做到这一点。 The documentations are too verbose but just explain the theories with nothing practical.
这些文档太冗长,但是只是在不实际的情况下解释了这些理论。
I have 2 screens in my StackNavigator as follows: 我的StackNavigator中有2个屏幕,如下所示:
const StackNav = StackNavigator({
SignName: { screen: SignNameScreen},
SignBday: { screen: SignBdayScreen}
})
each of the SignNameScreen
and SignBdayScreen
just has TextInput and I just want to get the user input across the screen. 每个
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>
);
}
}
I tried various methods like creating reducer
, export the class using connect
etc, but everything just breaks the code. 我尝试了各种方法,例如创建
reducer
,使用connect
导出类等,但是一切都破坏了代码。 Would anyone point me in the right direction, please? 有人能指出我正确的方向吗?
I have tried numerous sample project from github but they are either unbuildable or unrunnable because of various node problems.. sorry, javascript is my weak point too. 我已经尝试了许多来自github的示例项目,但是由于各种节点问题,它们要么无法构建,要么无法运行。.抱歉,javascript也是我的弱点。
Thanks a lot for your help. 非常感谢你的帮助。
Navigate like this 像这样导航
onPress={() => this.props.navigation.navigate('SignBday', { 'Param_Name': 'Param_Value' })}
Then get the param in another screen like this 然后像这样在另一个屏幕中获取参数
const { params } = this.props.navigation.state;
To get the value of parameter in next screen use 要在下一个屏幕中获取参数的值,请使用
params.Param_Name
It really depends on the app, if it is a simple app with less states, then you probably don't need to use Redux. 它实际上取决于应用程序,如果它是状态较少的简单应用程序,则可能不需要使用Redux。
Without redux. 没有redux。 You would need to pass it like this.
您需要像这样通过它。
this.props.navigation.navigate('NewPage',{ paramKey: paramValue })
And retrieve it on the other other page like 然后在其他页面上检索
const {params} = this.props.navigation.state;
Also make sure that you are having navigation access at that given component. 还要确保您在该给定组件上具有导航访问权限。
With Redux is a little more complicated. 使用Redux有点复杂。
You would need a some setup and an action and reducer, something like what is done here and here . 您将需要一些设置以及一个动作和减速器,就像在这里和这里所做的一样。
Goodluck! 祝好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.