导航到上一个屏幕时如何传递参数？

Question

我从屏幕 A 导航到屏幕 B..然后导航回屏幕 A 使用

this.props.navigation.goBack(null);

我想知道我们如何在执行此操作时传递参数？

这是我的代码

 import React, { Component } from 'react';
 import { View, Text, TextInput, ScrollView } from 'react-native';
 import Card from './Card';
 import CardSection from './CardSection';
 import MyButton from './MyButton';


 class Settings extends Component{
 constructor(props){
 super(props);
 this.state = {
   ip:'',
   port:''
 };
}

onSaveClick() {
 console.log('Button clicked');
 this.props.navigation.goBack();
}
render(){
const { input, container } = styles;
return(
  <View style = {container}>
  <Card>
  <CardSection>
    <TextInput 
      style = {input}
      onChangeText = {(ip) => this.setState({ip})}
      placeholder = "IP Address"
      autoCapitalize = "none"
      autoCorrect = {false}
      keyboardType = "numeric"
    />
    </CardSection>
    <CardSection>
      <TextInput
      style={styles.input}
      onChangeText={(port) => this.setState({port})}
      placeholder="Port Number"
      autoCapitalize="none"
      autoCorrect={false}
      keyboardType = "numeric"
    />
    </CardSection>
    <CardSection>
      <MyButton onPress ={this.onSaveClick.bind(this)}>
        Save
      </MyButton>
    </CardSection>
    <View>
    </View>
   </Card> 
  </View>
);
}
}

那么我怎样才能在前一个组件中访问这个组件的状态。我们可以将状态作为参数传递吗？

Answer 1

您应该遵循 Redux 方法

因为将状态/信息从子组件传递回父组件（第二个屏幕到第一个屏幕）是一种糟糕的设计模式，因为这会在应用程序中创建多个数据流路径，这使得调试变得困难。

redux 的帮助是

1. 当点击提交时，您将数据推送到全局存储中。（基本上调度一个操作并使用reducer来更新全局redux存储）

2. 导航回到上一屏幕。

3. 通过 connect（来自 React -redux 包）列出上一页中的这些更改并反映更改。

您可以使用节点包react-redux。

并从这里跟进示例 -> http://redux.js.org/docs/basics/ExampleTodoList.html

更多有用的例子在这里。