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

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 包）在上一页列出这些更改并反映这些更改。

可以使用 node 包 react-redux 。

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

更多有用的例子here。