Реагировать на встроенную навигацию по вкладкам внутри стека - PullRequest
Новая
       22

Реагировать на встроенную навигацию по вкладкам внутри стека

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

Когда я пытаюсь использовать навигатор вкладок в навигаторе стека, навигатор вкладок не отображается. За исключением случаев, когда я добавляю текст над навигатором вкладок.

Это мое приложение. js с навигатором стека. 

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer theme={DarkTheme}>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{headerShown: false}} />

        <Stack.Screen
          name="Settings"
          component={SettingsScreen}
          options={{headerShown: false}} />

        <Stack.Screen
          name="AddItem"
          component={AddItemScreen}
          options={{headerShown:false}} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Это мой домашний экран с навигатором вкладок 

export default HomeScreen = ({navigation}) => {
    return (
        <View style={{alignSelf: 'baseline'}}>
          <TabNavigation />
        </View>
    )
}

И, наконец, это мой TabNavigator. 

const Tabs = createMaterialTopTabNavigator();

export default function TabNavigation(){
    return(
        <NavigationContainer independent={true} theme={DarkTheme}>
            <Tabs.Navigator>
                <Tabs.Screen name="Todo" component={TodoView} />
                <Tabs.Screen name="Completed" component={CompletedView} />
            </Tabs.Navigator>
        </NavigationContainer>
    );
}

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

export default HomeScreen = ({navigation}) => {
    return (
        <View style={{alignSelf: 'baseline'}}>
          <Text>Test</Text>
          <TabNavigation />
        </View>
    )
}

я получаю следующее:

enter image description here

Все еще не идеально (вкладки не отображаются), но, по крайней мере, это что-то показывает. Любая помощь приветствуется!

1 Ответ

0 голосов
/ 02 апреля 2020

Я решил это! В компоненте HomeScreen. js я изменил это: 

export default HomeScreen = () => {
    return (
        <View>
          <TabNavigation />
          <FabButtons />
        </View>
    )
}

на следующее: 

export default HomeScreen = () => {
    return (
        <>
          <TabNavigation />
          <FabButtons />
        </>
    )
}

При удалении элемента управления «Вид» все компоненты были видны!

...