【问题标题】:Pass state data between component through navigator通过导航器在组件之间传递状态数据
【发布时间】:2017-10-23 18:35:55
【问题描述】:

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

我的导航器:

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

我的主屏幕类:

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

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

我的谜语课:

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

在 Riddles 组件中(在 RiddleScreen 类中),我有需要传递给 Home 组件(在 HomeScreen 类中)的值的状态。

实现这一目标的最佳方式是什么? 每一个帮助真的很感激!谢谢。

【问题讨论】:

    标签: reactjs react-native react-navigation stack-navigator


    【解决方案1】:

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

    示例

    <Button onPress={() => {this.props.navigation.navigate('SomeScreen', { some: this.state.someValue})}} />
    
    // and in SomeScreen
    console.log(this.props.navigation.state.params.some);
    

    【讨论】:

    • 好的,看起来不错。在 SomeScreen 上,如何更新 FirstScreen 中的“some”值?
    • @gaidediz 看看this answer
    • 从子组件我需要更新父组件的状态,在我的例子中,Home 是父组件,Riddle 是子组件,导航器导航到的第一个屏幕是 Home..在家里,我们有按钮,onPress 通过导航器将您传递给谜语组件,在谜语组件中我有一些状态,我希望主组件获得有关该状态的更新......我需要做些什么来实现这一目标?
    • @gaidediz 将更新 Home 组件中状态的函数作为参数传递给 Riddle 组件,如 some 参数
    • 很好用!!!谢谢!我做了以下操作: this.props.navigation.state.params.some(this.state.count) 在子组件和父组件 this.props.navigation.navigate('Riddles', { some: this.onChangeCount.bind(这)})。如果我在渲染下设置 this.props.navigation.state.params.some(this.state.count) 会弹出一个错误警告:在现有状态转换期间无法更新...但可以移动到componentWillMount,所以我在 componentWillMount 下尝试过,但它没有更新父级......你现在有一些工作方法吗?
    猜你喜欢
    • 1970-01-01
    • 2020-04-19
    • 2019-12-14
    • 1970-01-01
    • 2017-10-24
    • 2019-06-04
    • 2020-10-15
    • 2022-01-05
    • 1970-01-01
    相关资源
    最近更新 更多