通过本机导航将数据传递回组件

Question

我在执行App.js的地方有主StackNavigator：

export default class App extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="MainPage" component={MainPage} />
          <Stack.Screen name="Submit" component={Submit} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

我想做的是将数据从Submit组件传递到我的MainPage中，并从ScrollView的array: arr中的state的MainPage中显示出来。

Mainpage看起来像这样。我想通过函数addNode将节点添加到state的MainPage中：

class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      arr: [],
      liters: '',
      time: '',
    };
  }

  addNode = (time, liters) => {
    if (this.state.time) {
      this.state.arr.push({calc: time + liters});
      this.setState({time: ''});
      this.setState({liters: ''});
    }
  };

  onPress = () => {
    this.props.navigation.navigate('Submit', {addNode: this.addNode});
  };

  render() {
    return (
      <View>
        <ScrollView>{this.state.arr}</ScrollView>
        <TouchableOpacity onPress={this.onPress}>
          <Text>+</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

我的Submit组件看起来像这样。在按钮Submit上，我想将数据从输入传递到MainPage，将其添加到数组，然后在滚动视图中显示它：

class Submit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      liters: '',
      time: '',
    };
  }

  goBack() {
    this.props.navigation.goBack();
    this.props.navigation.state.params.addNode({
      time: this.state.time,
      liters: this.state.liters,
    });

  }
  render() {
    return (
      <View>
        <Text>Form</Text>
        <TextInput
          onChangeText={time => this.setState({time})}
          value={this.state.time}
        />
        <TextInput
          onChangeText={liters => this.setState({liters})}
          value={this.state.liters}
        />
        <Button title="Submit" onPress={this.goBack} />
      </View>
    );
  }
}

当我从Submit组件中单击Submit时，出现此屏幕错误：

我的问题是，如何使用parent将数据从children组件传回StackNavigator组件？我在这里做错了什么？

Answer 1

注意：这可能比回答更适合发表评论，但我的声誉不高

您是否将导航传递到Submitextends？在您的App.js中，您似乎正在传入Submit。如果要在Submitextends中调用导航功能您可能要执行以下操作

class Submit extends Component {
  ... //your code

  render() {
    return (
      <View>
        <Submitextends navigation={this.props.navigation} />
      </View>
    );
  }
}

然后在Submitextends中可以使用this.props.navigation.goBack();

如果要在goBack上附加数据，我将使用this.props.navigtation.navigate，请通过设置键offical Doc或在转到Submit页面时发送返回路径来确保它是正确的路径。

this.props.navigation.navigate(this.props.navigation.state.params.returnLocation,{addNode:"something"})

（希望没有误解您的问题）