reactjs React导航v3通过AppContainer设置屏幕属性

mwyxok5s 于 2022-11-29 发布在 React

关注(0)|答案(1)|浏览(108)

我需要将主题设置传递到每个屏幕的导航选项。设置存储在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'
   }}
/>

...其中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 Package 我的导航器时，我该如何做呢？使用navigation.setParams会在模拟器中产生明显的延迟，所以对我来说这不是一个合适的解决方案...请记住，主题可以随时更改！

reactjs

来源：https://stackoverflow.com/questions/53377536/react-navigation-v3-set-screenprops-through-appcontainer

1条答案

按热度按时间

hmae6n7t1#

Well）结果，您可以通过创建如下自定义导航器来实现这一点：

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/>
  );
}

希望能有所帮助：）

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs React导航v3通过AppContainer设置屏幕属性

1条答案

相关问题

热门标签

最新问答