RN的基本路由

安装依赖 这个真难受，依赖太多都蒙圈了

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依赖【安卓还没有环境】

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

//导航栏样式
const navBar = { headerShown: true, headerTintColor: "#fff", headerStyle: { backgroundColor: "red" }}
//App页面层级
<NavigationContainer>
    <Stack.Navigator initialRouteName="Home" mode="modal"> //mode = modal  页面切换是modal由下往上
        <Stack.Screen name="Mine" component= {Mine} options= {navBar} /> //页面
        <Stack.Screen name="Home" component= {Home} options= {{ ...navBar,title:"123"} /> //页面
    </Stack.Navigator>
</NavigationContainer>

一个普通的页面 跳转路由方法

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 >
        );
    }
}