使用本机导航从 parent 访问状态值

Question

我正在这样使用 createStackNavigator：

navigationOptions: ({ navigation }) => {
    return {
        title: 'Account Details',
        headerLeft : <Back nav={ navigation } goto={'Profile'}/>,
        headerRight: <Icon
            name='check'
            color='#fff'
            onPress={() => **SOME FUNCTION** }
        />
    }
}

这个 header 以 'Account Details' 形式加载，他们可以在其中编辑他们的用户名等。我想使用 header 中的 'check' 图标来保存输入的信息。

有没有办法告诉它使用我的 'Account Details' 组件中存在的函数，这样我就可以从那里访问状态值？或者以某种方式将它们传递回 parent?

提前致谢。

Answer 1

将该功能传递给navigation的state，正常使用

class YourComponent extends Component {
  componentDidMount(){
    this.props.navigation.setParams({
      yourFuntion: this._yourfunction,
    })
  }
  
  yourfunction = () => {
    // handle thing with state here
  }
}

/////////////////////////////////////////////////

navigationOptions: ({ navigation }) => {
    const yourFuntion = navigation.getParam("yourFuntion", ()=>{});
    return {
        ...
        headerRight: <Icon
            name='check'
            color='#fff'
            onPress={() => yourFuntion() }
        />
        ...
    }
}

使用本机导航从 parent 访问状态值

Access state values from parent using react native navigation

react-native

react-native-navigation

expo