реагировать навигация v3 установить screenProps через AppContainer - PullRequest
Новая
       17

реагировать навигация v3 установить screenProps через AppContainer

0 голосов
/ 19 ноября 2018

Мне нужно передать настройки темы для параметров навигации каждого экрана. Настройки хранятся в редуксе. В старой версии я бы написал что-то вроде этого: 

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 является частью избыточного состояния. Используется внутри навигацииОпции 

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 делает видимую задержку в эмуляторе, поэтому это не лучшее решение для меня ... Имейте в виду, что тему можно изменить в любое время!

1 Ответ

0 голосов
/ 19 ноября 2018

Хорошо). Вы можете добиться этого, создав собственный навигатор, подобный этому: 

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(ChalloNavWrapper);

А потом в вашем корневом компоненте 

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

Надеюсь, это поможет:)

...