RN中的路由，底部导航栏和路由的传参。一期

最新推荐文章于 2025-01-07 11:46:05 发布

原创最新推荐文章于 2025-01-07 11:46:05 发布 · 703 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react native

安装主库

npm i react-navigation --save

安装主库依赖的第三方库

npm i react-native-gesture-handler --save
npm i react-native-reanimated --save

根据项目需要引入各导航组件的库

npm i react-navigation-stack --save
npm i react-navigation-tabs --save
npm i react-native-safe-area-context --save
npm i @react-native-community/masked-view --save

以上步骤操作完成后就可以进入代码时间了！

1.可以在根目录下创建一个储存代码的文件夹：如screens文件夹；

2.在screens文件夹下创建一个appRootStack文件夹下方只有一个index.js文件，来放置底部的tabBar；代码如下：

import React from 'react';
import { Image, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
// 引入页面
import MyAppIndex from '../MyApp';
import TaskIndex from '../Task';
import AppCenterIndex from '../AppCenter';
import UserInfoIndex from '../UserInfo';

// 引入每个tabBar下边的routes
import MyAppStackNav from '../MyApp/routes';

const TabNavigator = createBottomTabNavigator({
    MyAppIndex: {
        screen: MyAppIndex,
        navigationOptions: {
            tabBarLabel: '首页',
            tabBarIcon: ({ tintColor }) => (
                <Image
                    source={require('../resources/images/tab1.png')}
                    style={[styles.image, { tintColor }]} // 设置图标的颜色
                />
            ),
        },
    },
    TaskIndex: {
        screen: TaskIndex,
        navigationOptions: {
            tabBarLabel: '首页1',
            tabBarIcon: ({ tintColor }) => (
                <Image
                    source={require('../resources/images/tab2.png')}
                    style={[styles.image, { tintColor }]}
                />
            ),
        },
    },
    AppCenterIndex: {
        screen: AppCenterIndex,
        navigationOptions: {
            tabBarLabel: '首页2',
            tabBarIcon: ({ tintColor }) => (
                <Image
                    source={require('../resources/images/tab3.png')}
                    style={[styles.image, { tintColor }]}
                />
            ),
        },
    },
    UserInfoIndex: {
        screen: UserInfoIndex,
        navigationOptions: {
            tabBarLabel: '首页3',
            tabBarIcon: ({ tintColor }) => (
                <Image
                    source={require('../resources/images/tab5.png')}
                    style={[styles.image, { tintColor }]}
                />
            ),
        },
    },
},
{
    navigationOptions: {
    	headerShown: false,
        //header: null, 这里不用他的原因是，会报出警告
    },
    tabBarOptions: {
        activeTintColor: '#435C71', // 设置选中tab的时候的颜色
        inactiveTintColor: '#BCC3CA', // 设置未选中tab的颜色
        style: {bottom: -35}, // 设置整个tabBar的样式
    },
});

const styles = StyleSheet.create({
    image: {
        width: 24,
        height: 24,
    },
});

const stackRouterMap = {
    TabNavigator,
    // 下边这些分别是每个tabbar里边的页面及路径
    ...MyAppStackNav,
};

const RootStack = createStackNavigator(stackRouterMap);

const AppContainer = createAppContainer(RootStack);

export default AppContainer;

3.将上述步骤2中暴露的，在根目录下的app.js中引入,代码如下：

import React, { Component } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  StatusBar，
} from 'react-native';
import AppContainer from './source/appRootstack';

class App extends Component {
  render() {
    return (
        <SafeAreaView style={{flex:1}}>
        	<StatusBar translucent backgroundColor="transparent" />
            <AppContainer />
        </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  
});

export default App;