通过导航器在组件之间传递状态数据

Question

我的问题看起来很简单，但我不知道如何解决它我有两个组件，我使用 StackNavigator 导航到它们，在我有状态值的组件之一中，我需要将状态值传递给另一个组件，但正如我所说，我使用 StackNavigator 从一个组件转到另一个组件，我试图弄清楚我该怎么做

我的导航器：

 const Navigate = StackNavigator(
  {
    Home: { screen: HomeScreen },
    Riddles: { screen: RiddlesScreen },
    Introduction: { screen: IntroductionScreen },
    About: { screen: AboutScreen },
  },
  { headerMode: 'screen' }
);

我的主屏幕class:

class HomeScreen extends Component {
  static navigationOptions = {
    header: null
  }

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

我的谜语画面class:

class RiddlesScreen extends Component {
  static navigationOptions = {
    header: null
  }
  render() {
    return (
      <View>
        <Riddles navigation={this.props.navigation} />
      </View>
    );
  }
}

在 Riddles 组件中（在 RiddleScreen class）我有我需要传递给 Home 组件的值的状态（在 HomeScreen class）。

实现此目标的最佳方法是什么？每一个帮助真的很感激！谢谢。

Answer 1

您可以在导航时在屏幕之间传递数据。更多信息 here.

例子

<Button onPress={() => {this.props.navigation.navigate('SomeScreen', { some: this.state.someValue})}} />

// and in SomeScreen
console.log(this.props.navigation.state.params.some);

通过导航器在组件之间传递状态数据

Pass state data between component through navigator

reactjs

react-native

react-navigation

stack-navigator