Как установить значение в createMaterialBottomTabNavigator из AsyncStorage - PullRequest
0 голосов
/ 18 июня 2019

Я использую createMaterialBottomTabNavigator, но перед экспортом я хочу присвоить значение для его navigationOptions

barStyle: { backgroundColor:someVariable}

, здесь проблема в том, что я хочу получить значение someVariable из AsyncStorage.И он возвращает обещание, потому что createMaterialBottomTabNavigator сначала экспортируется, после чего я получаю значение someVariable.Я не могу написать экспорт по умолчанию в функции async, иначе createMaterialBottomTabNavigator будет возвращен как обещание снова. Пожалуйста, дайте предложения.Я использую RedEx, но там также я должен обновить хранилище из AsyncStorage перед экспортом createMaterialBottomTabNavigator.

Пример кода

// tabnavigator.js
// I Imported this file in app.js , there i use this in 
createSwitchNavigator
// so this will execute on app starts only

var theme = {};
AsyncStorage.getItem('theam').then((res) => {
    theme = res
});

// I want theme from storage because i am going to apply theme on app 
// start
// Here I can get theme from ReduxStore but i returns the initial one 

const DashTabsNav = createMaterialBottomTabNavigator({
    ProfileStack: {
        screen: ProfileStack,//this is stack created with 
createStacknavigator , 
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (<Icon name="user" size={25} 
color={tintColor} />),
        },
    },
    Messages: {
        screen: MessageScreen,
        navigationOptions: {
            tabBarColor: 'red',
            tabBarIcon: ({ tintColor }) => (<Icon name="comments" size= 
   {25} color={tintColor} />)
        },

    },
},
    {
        activeColor: 'white',
        inactiveColor: 'white',
        barStyle: { backgroundColor: theme.themeColor },
    },
);
export default DashTabsNav;

1 Ответ

0 голосов
/ 26 июня 2019

Чтение https://reactnavigation.org/docs/en/headers.html#overriding-shared-navigationoptions

в пределах ваших ProfileScreen и MessageScreen переопределите цвет заголовка, выполнив

  static navigationOptions = ({ navigation, navigationOptions }) => {
    return {
      headerStyle: {
        backgroundColor: theme.themeColor,
      },
    };
  };
...