setParams 在 react-native 中不起作用

Posted 2023-02-22

【中文标题】setParams 在 react-native 中不起作用

【英文标题】：setParams not working in 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。

【参考方案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，因为导航应该作为道具传递给该组件。