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 >
        );
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2018.10.13日贴 人多多少少都是都是按照自己的模式活下来的。 当别人和自己差别太大时会感到生气,过于相像又...
    迷鹿mirror阅读 157评论 0 0
  • 感觉挺对不起关心、关注我的朋友们,我的日更居然只写了开头,第二天、第三天都没有继续,心中不知道写啥,脑子空...
    素食林阅读 173评论 0 0
  • 肩膀疼痛,估计与玩手机看电脑有关,还有上班干活的姿势,对肩膀不利,需要多锻炼了。下班跑步去沙边打球,为什么不去木材...
    瞿桂林阅读 30评论 0 0
  • 苦恋(二十七) 严肃 云朵飞驰过天空 地上没有一丝风 一阵小雨,飘忽不定 忙着收割的大人没有 ——停歇 反而加快速...
    严肃_f61d阅读 167评论 0 7
  • 永远不要期待所期待的
    6b8330335f7e阅读 186评论 0 0