setParams 在 react-native 中不起作用答案

【问题标题】：setParams not working in react-nativesetParams 在 react-native 中不起作用
【发布时间】：2018-05-01 02:02:57
【问题描述】：

我正在使用 react-native 和 redux。我正在尝试更新当前屏幕的参数，以便可以在顶部栏中使用的组件中访问它们，但参数未设置。我的代码如下：

画面路线：

AlertNameForm: {
    screen: AlertNameForm,
    navigationOptions: ({navigation}) => CancelAndDone(navigation)
  }

组件屏幕：在 componentDidMount 我正在设置参数。

class AlertNameForm {
    ..........
    componentDidMount() {
    this.props.navigation.setParams({onDonePress: this.onDonePress})
    }

    onDonePress: () => {
      // want to access this function in top-bar buttons.
    }
}

以下是其他组件：

export const CancelAndDone = (navigation) => ({
    headerLeft: <ButtonCancel navigation={navigation} />,
    headerRight: <ButtonDone navigation={navigation} />
})

const ButtonDone = withTheme(({navigation, theme: { tertiaryColor } }) => (
  <Button color={tertiaryColor} title="Done" onPress={() => {
      if (navigation.state.params && navigation.state.params.onDonePress) {
        navigation.state.params.onDonePress()
      }
      else {
        navigation.dispatch(NavigationActions.back())
      }
    }} />
))

但在 ButtonDone 组件中我无法访问功能 onDonePress 有没有其他方法可以在 react-native 中为当前屏幕设置参数。

【问题讨论】：

你的意思是你想在 navigationOptions 中访问 onDonePress 吗？你可以为更清晰的代码创建一个 jsfiddle。

标签： reactjs react-native react-router react-redux react-navigation

【解决方案1】：

您可以按如下方式在目标组件内分配功能：

componentDidMount = () => {
   const { navigation } = this.props
     navigation.setParams({
        onDonePress: () => this.myFunction(),
     })
}

myFunction = () => { /*body function*/ }

在您的页眉或页脚组件调用中：

navigation.state.params.onDonePress 或 route.params.onDonePress 如果您使用 React Navigation v5。

【讨论】：

【解决方案2】：

您应该使用this.props 引用navigation.state.params，因为导航应该作为道具传递给该组件。

【讨论】：