安裝依賴 這個(gè)真難受，依賴太多都蒙圈了

yarn add
@react-navigation/native @react-navigation/stack
react-native-reanimated 
react-native-gesture-handler 
react-native-screens 
react-native-safe-area-context 
@react-native-community/masked-view

安裝iOS依賴【安卓還沒有環(huán)境】

cd ios & pod install
cd ..
yarn run ios

配置路由容器

//App.js
import { NavigationContainer } from "@react-navigation/native"
import { createStackNavigator } from "@react-navigation/stack";
const Stack = createStackNavigator()

//導(dǎo)航欄樣式
const navBar = { headerShown: true, headerTintColor: "#fff", headerStyle: { backgroundColor: "red" }}
//App頁(yè)面層級(jí)
<NavigationContainer>
    <Stack.Navigator initialRouteName="Home" mode="modal"> //mode = modal  頁(yè)面切換是modal由下往上
        <Stack.Screen name="Mine" component= {Mine} options= {navBar} /> //頁(yè)面
        <Stack.Screen name="Home" component= {Home} options= {{ ...navBar,title:"123"} /> //頁(yè)面
    </Stack.Navigator>
</NavigationContainer>

一個(gè)普通的頁(yè)面 跳轉(zhuǎn)路由方法

class Home extends Component {
    push = () => {
        this.props.navigation.navigate("Mine")
    }
    render() {
        return (
            <Container style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
                <Button onPress={this.push}>
                    <Text>Go to Details</Text>
                </Button>
            </Container >
        );
    }
}