Пользовательский первый рендеринг реагирует на встроенную навигацию по вкладкам

Кто-нибудь знает, как установить initialroute, но не часть tab.screen реагировать на навигацию? Я хочу установить главный экран в качестве экрана по умолчанию, когда я открываю приложения без выделения фокуса на нижней вкладке.

Нравится это изображение

и когда я нажимаю вкладку просмотра, отображается страница просмотра. Поэтому, когда я нажимаю кнопку «Назад», я также могу вернуться на главный экран. введите описание изображения здесь


react-native react-router react-navigation-bottom-tab
person Sabdo Widiastuti    schedule 15.09.2020    source источник
comment
@BasvanderLinden Потому что мне нужно, чтобы домашний экран был по умолчанию для всего экрана, а при отображении домашнего экрана не выбирался для навигации по вкладкам. Или я могу использовать настраиваемую навигацию по маршруту в этом случае?   -  person Sabdo Widiastuti    schedule 16.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

Это сложнее, чем вы могли бы надеяться, но у меня кое-что работает, создав компонент настраиваемой панели вкладок:

const CustomTabBar = ({
  state,
  navigation,
  descriptors,
  screenHiddenInTabs,
}) => {
  return (
    <View
      style={{
        position: 'absolute',
        width: '100%',
        height: '100%',
      }}>
      <TouchableOpacity
        onPress={() => {
          navigation.navigate(state.routes[0].name);
        }}
        style={{
          position: 'absolute',
          height: 30,
          width: '100%',
          justifyContent: 'center',
          backgroundColor: 'white',
        }}>
        <Text style={{ padding: 5 }}>{'\u003c Back to Home'}</Text>
      </TouchableOpacity>
      <View
        style={{
          flexDirection: 'row',
          backgroundColor: 'white',
          height: 30,
          justifyContent: 'space-around',
          alignItems: 'center',
          position: 'absolute',
          width: '100%',
          bottom: 0,
        }}>
        {state.routes.map((route, index) => {
          const isFocused = state.index === index;

          const { options } = descriptors[route.key];
          const label =
            options.tabBarLabel !== undefined
              ? options.tabBarLabel
              : options.title !== undefined
              ? options.title
              : route.name;

          const onPress = () => {
            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
            });

            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
          };

          return route.name !== screenHiddenInTabs ? (
            <TouchableWithoutFeedback onPress={onPress}>
              <Text style={{ color: isFocused ? 'blue' : 'black' }}>
                {label}
              </Text>
            </TouchableWithoutFeedback>
          ) : null;
        })}
      </View>
    </View>
  );
};

// Pass the CustomTabBar component to the tabBar property
function YourTabs() {
  return (
    <Tab.Navigator
      tabBar={(props) => <CustomTabBar {...props} screenHiddenInTabs="Home" />}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Browse" component={BrowseScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Идея здесь в том, что мы не визуализируем вкладку на панели вкладок для маршрута в навигаторе вкладок, где имя маршрута равно значению добавленной нами screenHiddenInTabs опоры.

Таким образом, если мы установим для свойства screenHiddenInTabs значение "Home", экран в навигаторе вкладок, связанный с этим именем маршрута, будет отображаться при первом рендеринге, но не будет отображаться как вкладка на панели вкладок.

Эта настраиваемая панель вкладок также реализует верхнюю панель, которая позволяет вам вернуться к первому экрану в навигаторе вкладок, домашнему экрану в вашем случае.

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

В этом ответе я использовал настраиваемую панель вкладок: Пользовательская панель вкладок React Navigation 5 в качестве шаблона для настраиваемой панели вкладок, которую я создал выше. Я рекомендую посмотреть там ответ, потому что я убрал некоторые функции из этой панели, чтобы сделать пример кода менее подробным.

person Bas van der Linden    schedule 16.09.2020