react导航v3通过AppContainer设置screenProps

Question

我需要传递主题设置到每个屏幕的导航选项。设置存储在redux中。在旧版本中，我会这样写：

const AppNavigator = StackNavigator({
  Home: { screen: MainList },
  Settings: { screen: Settings },
  NewEvent: { screen: NewEvent },
  Contacts: { screen: Contacts },
  Map: { screen: Map},
})

在渲染函数中...

<AppNavigator 
   screenProps={{
     settings: this.props.settings,
     headerTintColor: '#ffffff'
   }}
/>

...where props.settings是redux状态的一部分。在navigationOptions内部使用的

static navigationOptions = ({ navigation, screenProps }) => {
  let settings = screenProps.settings;
  let theme = settings? settings.theme: null;

  return {
    title: strings.account,
    headerTintColor: screenProps.headerTintColor,
    headerStyle: {backgroundColor: theme? theme.def.primaryColor: null}
  };
};

但是当我必须用createAppContainer包装我的导航器时，我现在该怎么做呢？在仿真器中使用navigation.setParams会造成明显的延迟，所以对我来说这不是一个合适的解决方案。记住主题可以随时改变！

Answer 1

你可以通过创建一个定制的导航器来实现这一点：

class NavWrapper extends Component {
  static router = AppNavigator.router;
  render() {
    const { navigation } = this.props;

    return <AppNavigator
      navigation={navigation}
      screenProps={{
        settings: this.props.settings,
        headerTintColor: '#ffffff'
      }}
    />;
  }
}

const AppNavWrapper = connect(state => ({settings: state.settings}))(NavWrapper);
const AppContainer = createAppContainer(AppNavWrapper);

然后在根组件中

render() {
  return (
    <AppContainer/>
  );
}

希望这能有所帮助:)