安装主库
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;