Question

我目前正在使用React Navigation v4并迁移到v5。我正在使用official documentation进行升级，但是很遗憾，我遇到了阻止程序。

在V4中，我可以执行以下操作：

export default function ExampleScreen(props) {
  return <View></View>
}

ExampleScreen.navigationOptions = ({navigation, navigationOptions}) => ({
  headerStyle: {
    ...navigationOptions.headerStyle,
    borderBottomWidth: 0
  },
  headerRight: () => <SearchBox navigation={navigation} />
})

但是在V5中，我似乎无法访问navigationOptions参数，因此无法获得navigationOptions.headerStyle。

export default function ExampleScreen(props) {
  props.navigation.setOptions({
    headerStyle: {
      // I can't get the default styles here.
      borderBottomWidth: 0
    },
    headerRight: () => <SearchBox navigation={props.navigation} />
  })

  return <View></View>
}

由于在其他任何地方都没有记录，我该如何在React Navigation V5中做到这一点？

Answer 1

将默认值放入变量并导出。然后在需要的地方导入并使用：

export const headerStyle = {
  /* whatever */
};

// Use in `screenOptions`
<Stack.Navigator screenOptions={{ headerStyle }}></Stack.Navigator>;

// Use in `setOptions`
navigation.setOptions({
  headerStyle: [headerStyle, { borderBottomWidth: 0 }],
  headerRight: () => <SearchBox navigation={props.navigation} />
});

从React Navigation v4升级到v5时获取默认样式

1 个答案: