react native 底部导航 createBottomTabNavigator

1.安装组件

yarn add react-navigation-tabs

2.创建自定义底部导航组件类 BaseNav.js

 1 import React,{ Component} from 'react';
 2 import {
 3     View,
 4     Text,
 5     Button
 6 } from 'react-native';
 7 
 8 import {createAppContainer} from 'react-navigation';//容器
 9 import {} from 'react-navigation-tabs';
10 import {createBottomTabNavigator} from 'react-navigation-tabs';
11 
12 class HomeScreen extends Component{
13     render(){
14         return(
15             <View style={{
16                 flex:1,
17                 backgroundColor:'cyan',
18                 justifyContent:'center',
19                 alignItems:'center'
20             }}>
21                 <Text>首页</Text>
22             </View>
23         )
24     }
25 }
26 
27 class DetailScreen extends Component{
28     render(){
29         return(
30             <View style={{
31                 flex:1,
32                 backgroundColor:'red',
33                 justifyContent:'center',
34                 alignItems:'center'
35             }}>
36                 <Text>详情页</Text>
37             </View>
38         )
39     }
40 }
41 
42 //路由堆栈
43 const TabNavigator=createBottomTabNavigator({
44     Home:HomeScreen,
45     Detail:DetailScreen
46 });
47 
48 //容器
49 const AppContainer=createAppContainer(TabNavigator);
50 
51 
52 export default  AppContainer;

3.App.js引用自定义组件

 1 /**
 2  * Sample React Native App
 3  * https://github.com/facebook/react-native
 4  *
 5  * @format
 6  * @flow strict-local
 7  */
 8 
 9 import React from 'react';
10 import {
11   SafeAreaView,
12   StyleSheet,
13   ScrollView,
14   View,
15   Text,
16   StatusBar,
17 } from 'react-native';
18 
19 import BaseNav from './navigator/BaseNav';
20 
21 const App: () => React$Node = () => {
22 
23   return (
24     <BaseNav/>
25      
26   );
27 };
28 
29 const styles=StyleSheet.create({
30 
31 });
32 
33 
34 export default App;