Реагируйте на встроенную навигацию: элементы ящика не отображаются или исчезают при установке значения гибкости

Question

Ниже приведен мой минимальный рабочий пример.Это 3 основных экрана и экран Ящика.В методе render() метода DrawerScreen я заполняю экран выдвижного ящика элементами навигации из массива вкладок.

Когда я устанавливаю значение изгиба navigationItem, все начинает вести себя странно.

• Элементы не отображаются на экране ящика при повторной загрузке приложения большую часть времени
• Когда элементы отображаются, они исчезают после нажатия.

Если стиль navigationItem в таблице стилей не имеет значения flex, он работает должным образом.Я не понимаю, что происходит, и не знаю, как это исправить.

Код :

const packageName = 'com.rnplayground';

class FirstTab extends React.Component {
render(){
    console.log(this.props)
    return(
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>FirstTab</Text>
      </View>
    )
};
}

class SecondTab extends React.Component {


render(){
    console.log(this.props)
    return(
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>SecondTab</Text>
          </View>
    )
};
}

class ThirdTab extends React.Component {


render(){
    console.log(this.props)
    return(
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>ThirdTab</Text>
        </View>
    )
};
}


class DrawerScreen extends React.Component {

render(){
    const {tabs} = this.props;
    return(
        <View style={styles.navigationContainer}>
            {tabs.map((route, index) => {
                const navigationLabel = route.title;

                return (
                    <TouchableHighlight
                        key={route.screen}
                        onPress={() => {
                            this.props.navigator.switchToTab({
                                tabIndex: index
                            });
                        }}
                        underlayColor='blue'
                    >
                        <View style={styles.navigationItem}>
                            <Text style={styles.navigationLabel}>
                                {navigationLabel}
                            </Text>
                        </View>
                    </TouchableHighlight>
                );
            })}
        </View>     
    )
};
}

function registerScreens(){
    Navigation.registerComponent(`${packageName}.FirstTab`, () => FirstTab );
    Navigation.registerComponent(`${packageName}.SecondTab`, () => SecondTab );
    Navigation.registerComponent(`${packageName}.ThirdTab`, () => ThirdTab );
    Navigation.registerComponent(`${packageName}.DrawerScreen`, () => DrawerScreen );
}

function startApp() {
registerScreens();

const tabs = [
    {
        screen: `${packageName}.FirstTab`,
        title: 'FirstTab',
        icon: require('./image.png'),
        navigatorStyle: {
            tabBarHidden: true,
        },
    },
    {
        screen: `${packageName}.SecondTab`,
        title: 'SecondTab',
        icon: require('./image.png'),
        navigatorStyle: {
            tabBarHidden: true,
        },

    },
    {
        screen: `${packageName}.ThirdTab`,
        title: 'ThirdTab',
        icon: require('./image.png'),
        navigatorStyle: {
            tabBarHidden: true,
        },
    },
];

Navigation.startTabBasedApp(
    {
        tabs: tabs,
        drawer: { 
            left: {
              screen: `${packageName}.DrawerScreen`,
              passProps: {
                  tabs: tabs
              },
              fixedWidth: 800,
            }
        },
        tabsStyle:{
            tabBarHidden: true,
        }
    },
);

}

startApp();

Таблица стилей:

const styles = StyleSheet.create({
navigationContainer:{
    flex: 1,
    width: '100%',
    backgroundColor: 'white',
},

navigationItem: {
    flex: 1,
}

});

Здесь - это imgur-ссылка, показывающая рассматриваемое поведение.