使用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);

我希望能够在每个渲染的屏幕上进行导航。我试着将导航器对象添加到组件中，但我不知道如何传递它或制作一个propper导航模式。

Answer 1

react-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>
)