Как всегда устанавливать первый экран Stack Navigator внутри Tab Navigator React Navigation 5 - PullRequest
Новая
       40

Как всегда устанавливать первый экран Stack Navigator внутри Tab Navigator React Navigation 5

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

Реактивная навигация 5

Я создал StackNavigator внутри TabNavigator, и навигация между домашним экраном и другими экранами работает. Но проблема в том, что при переходе от Tab2 к Tab1 я ожидаю, что Tab1 всегда показывает мне первый экран StackNavigator. 

tab1
   -> Stack
        -screen1
        -screen2
tab2

Я нахожусь на screen2, а затем перехожу на tab2 и затем возвращаюсь к Tab1 I хочу всегда отображать screen1.

Я пытаюсь использовать 

OnTabPress({navigation})=>{
    navigation.navigate("stackName",{
     screen: "screen1"
   }).
}

Его работа, но сначала покажите мне screen2, а затем перейдите к screen1. Есть ли другое решение? https://snack.expo.io/@usamasomy / стонет-пончик

1 Ответ

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

enter image description here

initialRouteName= "NAME" - это ключевое слово, чтобы убедиться, что у вас есть значение по умолчанию и вы используете navigate() push() pop() соответственно.

Во-первых, создайте пользовательский TabBar, чтобы мы могли писать собственные функции, выполняемые с помощью onPress

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ flexDirection: 'row' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
            navigation.reset({
              index: 0,
              routes: [{ name: 'Screen1' }],
            }) 

        if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }      
            }}
        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

Затем в TabScreens переписать исходный TabBar в Tab.Navigator с помощью tabBar=... затем звоните navigation.reset() с index:0 и routes:{{name: 'Screen1'}} каждый раз, когда нажимается MyTabBar. 

const TabScreens = ()=>{
  return(
    <Tab.Navigator  tabBar={props => <MyTabBar {...props} />} initialRouteName="Tab1Screens" >
      <Tab.Screen 
        name      = "Tab1Screens"
        component = {Tab1Screens}
      />
      <Tab.Screen
        name      = "Tab2Screens"
        component = {Tab2Screens}
      />
    </Tab.Navigator>
  )
}

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityStates={isFocused ? ['selected'] : []}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1 }}
          >
            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

Это может быть значительно улучшено, например: 

-some logic before `navigation.reset()`

-Accessing onPress without creating a new component 

-etc..

наконец, закуска доступна здесь: https://snack.expo.io/@karammarrie / customtabbar

...