Как получить доступ к опоре навигации в навигации по вкладкам - React Navigation

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

мой код

MoreStack.navigationOptions = {
  tabBarLabel: 'More',
  tabBarIcon: ({ focused, navigation }) => (
    <View>
      <TabBarIcon
        focused={focused}
        name={Platform.OS === 'ios' ? 'ios-more' : 'md-more'}
        type='ionicon'
      />
       <View
          style={{
            flex: 1,
            position: 'absolute',
            bottom: 20,
            alignItems: 'center',
            right: 10,
          }}
        >
          <TouchableOpacity onPress={() => navigation.navigate('Chat')}>
            <Image
              source={require('../assets/chat.png')}
              style={{ alignSelf: 'center', height: 60, width: 60 }}
            />
          </TouchableOpacity>
        </View>
    </View>
  ),
};

react-native reactjs react-navigation react-navigation-bottom-tab
person Shady Hakim    schedule 12.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы иметь возможность перемещаться где угодно, держите ссылку на NavigationContainer.

Пример: я создал NavigationService, как показано ниже:

import { CommonActions, StackActions } from "@react-navigation/native";// react navigation 5
import { NavigationActions, StackActions } from "react-navigation"; // react navigation 4

export default class NavigationService {
    // core navigator
    private static navigator;

    // sets the core navigator
    static setTopLevelNavigator(navigatorRef) {
        NavigationService.navigator = navigatorRef;
    }
    // naviget to a route
    static navigate(name, params?) {
        NavigationService.navigator.dispatch(CommonActions.navigate({ name, params }));
    }

    static goBack() {
        return NavigationService.navigator.dispatch(CommonActions.goBack());
    }

    static popToTop() {
        NavigationService.navigator.dispatch(StackActions.popToTop())
    }
}

И в вашем App.js:

<NavigationContainer ref={(ref) => NavigationService.setTopLevelNavigator(ref)}>
// 
</NavigationContainer>

Теперь NavigationService имеет ссылку на NavigationContainer, поэтому вы можете перемещаться куда угодно, выполнив:

NavigationService.navigate("SomeScreen");

Если вы используете React Navigation 4, замените CommonActions на NavigationActions.

person Abdullah Asendar    schedule 13.07.2020