Передача объекта навигатора компонентам с помощью React Navigator и expo

Question

У меня есть приложение React Native, в котором я хочу сделать перенаправление для определенного компонента.

У меня есть основной компонент App.js со следующим исходным кодом:

import React from "react";
import { Text } from "react-native";
import { createAppContainer } from "react-navigation";
import { createBottomTabNavigator } from 'react-navigation-tabs'
import styles from "./assets/styles";
import HomeScreen from "./containers/Home";
import MatchesScreen from "./containers/Matches";
import MessagesScreen from "./containers/Messages";
import ProfileScreen from "./containers/Profile";
import Icon from "./components/Icon";
import { Ionicons } from '@expo/vector-icons';

const App = createBottomTabNavigator(
    {
        Explore: {
            screen: HomeScreen,
            navigationOptions: {
                tabBarIcon: ({ focused }) => {
                    return (
                        <Text style={styles.iconMenu}>
                            <Ionicons name="md-add-circle" size={30} color={focused ? 'purple': 'black'} />
                        </Text>
                    );
                }
            }
        },
        Matches: {
            screen: MatchesScreen,
            navigationOptions: {
                tabBarIcon: ({ focused }) => {
                    return (
                        <Text style={styles.iconMenu}>
                <Ionicons name="md-checkmark-circle" size={30} color={focused ? 'purple': 'black'} />
                        </Text>
                    );
                }
            }
        },
        Chat: {
            screen: MessagesScreen,
            navigationOptions: {
                tabBarIcon: ({ focused }) => {
                    return (
                        <Text style={styles.iconMenu}>
                            <Ionicons name="md-checkmark" size={30} color={focused ? 'purple': 'black'} />
                        </Text>
                    );
                }
            }
        },
        Profile: {
            screen: ProfileScreen,
            navigationOptions: {
                tabBarIcon: ({ focused }) => {
                    return (
                        <Text style={styles.iconMenu}>
                        <Ionicons name="md-ac-unit" size={30} color={focused ? 'purple': 'black'} />
                        </Text>
                    );
                }
            }
        }
    },
    {
        tabBarOptions: {
            activeTintColor: "#7444C0",
            inactiveTintColor: "#363636",
            labelStyle: {
                fontSize: 14,
                textTransform: "uppercase",
                paddingTop: 10
            },
            style: {
                backgroundColor: "#FFF",
                borderTopWidth: 0,
                paddingVertical: 30,
                height: 60,
                marginBottom: 0,
                shadowOpacity: 0.05,
                shadowRadius: 10,
                shadowColor: "#000",
                shadowOffset: { height: 0, width: 0 }
            }
        }
    }
);

export default createAppContainer(App);

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

Answer 1

response-navigation передает свойства навигации в его дочерний компонент (ваш HomeScreen, MatchesScreen, ... должен иметь свойства навигации), и когда вы хотите перейти на другой экран, вы можете использовать navigation.navigate(screenName)

Например:

const HomeScreen = ({navigation}) => (
  <View>
    <Text>Home</Text>
    <TouchableOpacity onPress={() => navigation.navigtate('Matches')}>
      <Text>Go to Matches</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => navigation.navigtate('Chat')}>
      <Text>Go to Chat</Text>
    </TouchableOpacity>
  </View>
)