为什么我的 this.props.navigation.setParams 不工作？

Question

我在 selectedStyleIds 上设置我的整数数组。为什么我的 this.props.navigaion.setParams 不工作？

  _setSelectedStyleIds = (selectedStyleIds) => {
    const action = NavigationActions.setParams({ 
        params: {selectedStyleIds},
        key: 'id-1509842157447-6' <- got this from console
    });
    this.props.navigation.dispatch(action);
    this.props.navigation.setParams({styleIds:selectedStyleIds});
    this.setState({selectedStyleIds});
  }

onCheck = ({selectedStyleIds}) => {
    console.log('onCheck');
    console.log(selectedStyleIds); <- [1,2,3,4,5]
    this.props._setSelectedStyleIds(selectedStyleIds);
    this.setState({selectedStyleIds}); <- working
}



_handleTagStylePress = () => {
    this.props.navigation.navigate('TagStyle', {onCheck: this.onCheck, selectedStyleIds: this.state.selectedStyleIds});
}

on onNavigatioOptions（仅用于调试）

onPress={() => {
          let {image, text, ..., selectedSeasonIds,
            gender, selectedSizeIds, selectedColorIds, selectedStyleIds,
            brand, ..., base64 } = navigation.state.params;
          console.log('onsave')
          console.log(navigation.state.params.selectedStyleIds) <<-- []

我已经检查这些行超过 50 次，但显然 this.props.navigation.setParams({selectedStyleIds}); 不工作。

所有其他设置状态和参数都没有问题，但只有 selectedStyleIds 不能设置为 navigation.state.params。

Answer 1

关于从组件本身设置导航栏的标题，我遇到了类似的问题。

以下对我有用。

1）我定义了navigationOptions方法（react navigation设置导航属性的回调方法）

当此方法运行时，您很可能无法访问设置导航器状态所需的属性，因此只需 return 当前参数，这就是我所做的：

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    return params;
};

2）我在componentDidMount中实现了标题构造，设置状态：

componentDidMount(){
    t = "The window title";
    this.props.navigation.setParams({title: t });
}

我认为同样可以在任何用户界面事件中完成，例如 onPress，并且可以应用于任何属性。

重要说明：不工作和工作对我来说有什么区别navigationOptions 方法的定义，即使它是一个 "do-nothing" 方法（return 得到的是什么，没有改变）

Answer 2

现在 2020 年，react native 的官方文档似乎建议您使用 route.param 来获取您想要的参数。

        const { itemId } = route.params;

这是来自官方文档：

通过将参数放入对象中作为 navigation.navigate 函数的第二个参数将参数传递给路由：navigation.navigate('RouteName', { /* params go here */ } )

读取屏幕组件中的参数：route.params.

https://reactnavigation.org/docs/params/

Answer 3

您可以按如下方式进行

const handleCancelTransfer = useCallback(() => {
  navigation.dispatch((state) => {
    const routes = state.routes.filter((routeInStack) => routeInStack.name !== "TransferConfirmation");
    routes[routes.length - 1] = {
      ...routes[routes.length - 1],
      params: { keepFormData: true }
    }
    return CommonActions.reset({
      ...state,
      routes,
      index: routes.length - 1,
    })
  });
}, [navigation]);

为什么我的 this.props.navigation.setParams 不工作？

Why is my this.props.navigation.setParams not working?

javascript

react-native

react-navigation