tabbar底部导航栏

安装依赖包

需要安装四个依赖包（自己找适配自己RN的导航版本，我这里RN下面的依赖目前都是最新的，如下图所示）react-navigation/native 网站
yarn add @react-navigation/native
yarn add @react-navigation/bottom-tabs
yarn add react-native-screens react-native-safe-area-context

RN导航路由配置

新建两个tabbar页面

这里我做的homeScreen.js和SettingsScreen.js

homeScreen.js

import {Text, View} from 'react-native';

export default function homeScreen() {
  return (
    <View>
      <Text>123</Text>
    </View>
  );
}

SettingsScreen.js

import {Text, View} from 'react-native';

export default function SettingsScreen() {
  return (
    <View>
      <Text>456</Text>
    </View>
  );
}

配置tabbar页面，这里新起个页面，例如我这里做个MyTabs.js

MyTabs.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './homeScreen'
import SettingsScreen from './SettingsScreen'
import { Image } from 'react-native';
const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} options={{tabBarIcon:({color,size})=>{
        return (  // 底部栏图标
          <Image style={{width:15,height:15}} source={require('./1212.png')}></Image>
        )
      }}}/>
      <Tab.Screen name="Settings" component={SettingsScreen} options={{tabBarIcon:({color,size})=>{
        return (
          <Image style={{width:15,height:15}} source={require('./1212.png')}></Image>
        )
      }}}/>
    </Tab.Navigator>
  );
}

export default MyTabs

App.js内容如下

import { NavigationContainer } from '@react-navigation/native';
import MyTabs from './src/MyTabs';
function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}
export default App

项目结构如下：

效果图
RN导航路由配置

非tabbar页面的导航

安装三个插件
yarn add @react-navigation/native 如果上面装过了这个就不用装了
yarn add @react-navigation/stack
yarn add react-native-gesture-handler

homeScreen.js

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

export default function homeScreen(params) {
  console.log(params);
  return (
    <View>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Button title='点击跳转另一个页面' onPress={()=>{params.navigation.navigate('Setting',{name:'zhangsan'})}}></Button>
    </View>
  );
}

settingsScreen.js

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

export default function SettingsScreen(props) {
  return (
    <View>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Button title='返回到上一级' onPress={()=>{props.navigation.goBack()}}></Button>
    </View>
  );
}

配置导航路由页面MyTab.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './homeScreen';
import SettingsScreen from './SettingsScreen';

const Stack = createStackNavigator();

function MyTabs() {
  return (
    <Stack.Navigator> // screenOptions={{ headerShown: false }} 这里还有个参数可以隐藏上面的导航条，我这里没有加，如果有需要隐藏就加上，如果需要这个返回键又需要在导航条加样式的话，建议自己做个组件
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Setting" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

export default App;

App.js

import MyTabs from './src/MyTabs';
function App() {
  return (
      <MyTabs />
  );
}
export default App

效果图

点击跳转后的效果图
RN导航路由配置

跳转后的新页面可以通过props.route拿到路由参数

原文链接：https://juejin.cn/post/7349575576045666341 作者：萧寂