Как правильно реагировать на отображение родной верхней вкладки и стека навигатора в строке состояния? - PullRequest
0 голосов
/ 02 февраля 2019

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

У меня в качестве навигатора есть это:

const tabConfiguration = {
    DecksList: {
        screen: DecksList,
        navigationOptions: {
            title: 'Deck List'
        }
    },
    NewDeck: {
        screen: NewDeck,
        navigationOptions: {
            title: 'New Deck'
        }
    },
};

const TabNavigator =
    Platform.select({
        ios: createBottomTabNavigator(tabConfiguration),
        android: createMaterialTopTabNavigator(tabConfiguration)
    });

const StackNavigator = createStackNavigator({
        Main: {
            screen: TabNavigator,
            navigationOptions: {
                header: null
            }
        },
        Deck: {
            screen: Deck,
            navigationOptions: {
                title: 'Deck'
            }
        }
    });

export default createAppContainer(StackNavigator);

И мой App.js такой:

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <StatusBarView backgroundColor={'red'}
                               barStyle="light-content"/>
                <AppNavigator/>
            </View>
        );
    }
}

StatusBarView - это:

const StatusBarView = props => {
    const {backgroundColor} = props;
    return (
        <View style={{backgroundColor, height: Constants.statusBarHeight}}>
            <StatusBar translucent backgroundColor={backgroundColor} {...props} />
        </View>
    );
};

С таким кодом мой экран вкладки выглядит так: enter image description here А другой мой экран заканчивается так:enter image description here Этот второй экран имеет заголовок выше, чем следовало бы из-за StatusBarView.Если я удаляю его, второй экран выглядит нормально: enter image description here Но экран вкладок идет за строкой состояния: enter image description here Кто-нибудь знает, как можно с этим справиться?Мне нужна строка состояния для одного экрана (одна вкладка) и не может быть для другого экрана (одна без вкладок).

Я сделал перекус здесь: https://snack.expo.io/@esscheffer/flashcards-start

1 Ответ

0 голосов
/ 24 апреля 2019

Эта строка решит проблему

navigationOptions: {headerForceInset: {top: 'never'}, ...}

...