react-nativeとreact-navigationおよびredux [画面全体に状態を転送]
Zennichimaro
私は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も私の弱点です。
あなたの助けをどうもありがとう。
パラスワッツ
このようにナビゲートする
onPress={() => this.props.navigation.navigate('SignBday', { 'Param_Name': 'Param_Value' })}
次に、このような別の画面でパラメータを取得します
const { params } = this.props.navigation.state;
次の画面でパラメータの値を取得するには、
params.Param_Name
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
React、Redux、およびredux-formを使用して状態を更新する方法
- 2
react-nativeおよびreduxで状態を更新するアクションを待つ
- 3
react Nativeとredux、thunkによる非同期呼び出し
- 4
Redux / ReactおよびMVC、OOP
- 5
React、Redux、およびImmutable
- 6
react-reduxおよびredux-persistで接続を使用する
- 7
Redux-FormおよびReact-RTE-RTEeditorValueをフォームの状態に保存しますか？
- 8
ReactNativeとreact-navigationおよびRedux-グローバルに利用可能な「サインアウト」ボタンを実装する方法
- 9
ホーム画面のナビゲーションスタックのリセット（React NavigationおよびReact Native）
- 10
iOSでreact-native-navigationをreact-native-callkitと統合する
- 11
React-Router-ReduxおよびReact-Bootstrap
- 12
Webpack構成エラーをReactおよびreduxします
- 13
react-nativeでredux状態を更新した後に画面をレンダリングする
- 14
React-NativeとmapStateToPropsを使用したRedux
- 15
どのようにreact-reduxをmapStateToProps、MapDispatchToPropsおよびredux-routerと接続するか
- 16
React Native：状態とAsyncStorageを持つTextInput
- 17
React NativeとReduxを使用したアニメーションの状態管理
- 18
React Native LoadcssおよびjsWebview
- 19
React Native、Redux、およびNavigatorを使用してナビゲートする適切な方法
- 20
React Native、Redux、およびFetch： "Possible Unhandled Promise Rejection（id：0）"
- 21
react-native および redux および react-native-maps での複数リクエストの処理
- 22
ReactとReduxが状態を失う
- 23
React Native：特定の状態が変化したときに関数を呼び出す
- 24
React + Redux：未定義の初期状態とレデューサーが期待どおりに呼び出されない
- 25
react-native-firebaseとreact-redux-firebase？
- 26
使用中の状態の分解reactおよびtypescriptの状態
- 27
状態が変化したときにreact-reduxがページ全体を再レンダリングしないようにする
- 28
reactおよびreduxのcomponentDidUpdate（）でアクションを呼び出して状態を設定する方法（無限ループを防ぐ）
- 29
reactおよびreduxのcomponentDidUpdate（）でアクションを呼び出して状態を設定する方法（無限ループを防ぐ）
コメントを追加