Как скрыть пространство надреза и закрасить его при использовании Header / TabNavigator с React Native / ReactNavigation - PullRequest
Новая
       9

Как скрыть пространство надреза и закрасить его при использовании Header / TabNavigator с React Native / ReactNavigation

0 голосов
/ 23 марта 2020

Я использую Expo с библиотекой ReactNavigation и у меня две проблемы:

1 - для начальных экранов (spla sh, логин и т. Д.) Заголовок не установлен, но есть метка показ пространства (когда устройство подходит). Как я могу удалить это место на этих экранах?

2 - для следующих экранов у меня есть заголовок и навигатор по вкладкам. На них я хотел бы показать пространство надреза, и оно показывает, как должно, но я не могу его покрасить, оно остается белым. Я пытался использовать <SafeAreaProvider>, чтобы обернуть весь AppNavigator, и использовал <SafeAreaView> в компонентах и ​​/ или экранах, которые я хотел, придавая ему гибкость и цвет (как предложено в документах Expo), но ничего не получалось. У вас есть предложения?

Вот часть моего AppNavigator. js код: 

function AuthenticationStack () {
///...some code vars

  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name={screenRouteName} component={screenRouteComponent} initialParams={screenRouteParams} />
      <Stack.Screen name='ForgotPassword' component={ForgotPassword} />
      <Stack.Screen name='NeedHelp' component={NeedHelp} />
    </Stack.Navigator>
  )
}

///...
///This is the function I call on App.js :

function AppNavigator () {
  return (
    <Stack.Navigator initialRouteName={AuthenticationStack}>
      <Stack.Screen name='AuthenticationStack' component={AuthenticationStack} options={{ headerShown: false }} />
      <Tab.Screen
        name='StackWithTabNavigation'
        component={StackWithTabNavigation}
        options={{
          headerLeft: null,
          headerRight: null,
          headerTitle: headerConfig,
          headerTitleAlign: 'center',
          headerTitleContainerStyle: {
            width: '100%'
          }
        }}
      />
    </Stack.Navigator>
  )
}
...