react-native的路由导航相关配置

1、官方文档：React Navigation

步骤：（前提是配置好环境之后）

1、初始化一个react-native的项目

输入指令（这里安装的是0.68版本的，相对稳定）

npx react-native init 项目名字 --version 0.68.2

接着输入 cd 项目名字

npx react-native run-android

启动项目 成功之后是这样的：

2、根据官网给的文档对应的进行安装

npm install @react-navigation/native

npm install react-native-screens react-native-safe-area-context

npm install @react-navigation/bottom-tabs

3、运用：

创建文件目录如下：创建src

 在App.js里面写入

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';


import Home from './src/views/Home';
import Settings from "./src/views/Setting"
import Product from "./src/views/Product"
import Mine from "./src/views/Mine"

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home}  />
        <Tab.Screen name="Settings" component={Settings} />
        <Tab.Screen name="Product" component={Product} options={{ tabBarBadge: 3 }} />
        <Tab.Screen name="Mine" component={Mine}  options={{ tabBarBadge: 99 }}/>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

运行出来如下：

页面跳转实现：在src/views/Home/index.js

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { Button } from 'react-native'

export default function Home({navigation}) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>

        <Button title='跳转到产品页面' onPress={()=>navigation.navigate("Product")}></Button>
      </Text>
    </View>
  )
}

const styles = StyleSheet.create({})

 点击即可跳转

--------------------------------------------------------       end        -------------------------------------------------------