引入这些依赖包缺一不可:
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.2.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.4.0",
"react-native-tab-view": "^3.0.1",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.1"
App.js
import React from 'react';
import {createAppContainer} from 'react-navigation'
import {createStackNavigator} from 'react-navigation-stack'
import BottomNavigator from './page/root/rootPage'
const AppStack=createStackNavigator(
{
BottomNavigation:{
screen:BottomNavigator,
navigationOption:{
headerShow:false
}
}
},{
mode:'modal',
headerMode:'none'
}
);
export default createAppContainer(AppStack);
./page/root/rootPage.js
import {createBottomTabNavigator} from 'react-navigation-tabs'
import HomePage from '../home/homePage'
import CatePage from '../cate/catePage'
import MinePage from '../mine/minePage'
const BottomNavigator = createBottomTabNavigator({
Home:{
screen:HomePage,
navigationOptions:{
title:'首页',
tabBarLabel:'首页'
}
},
Cate:{
screen:CatePage,
navigationOptions:{
title:'分类',
tabBarLabel:'分类'
}
},
Mine:{
screen:MinePage,
navigationOptions:{
title:'我的',
tabBarLabel:'我的'
}
}
});
export default BottomNavigator;
引入的三个页面文件都差不多
简单的修改了一下文字
…/home/homePage.js
import React from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
const HomePage=()=>{
return (
<>
<View style={styles.view}>
<Text>Home Page</Text>
</View>
</>
)
};
const styles=StyleSheet.create({
view:{
height:200,
width:200,
backgroundColor:"rgba(200,255,0,0.5)"
}
})
export default HomePage;
…/mine/minePage.js
import React from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
const CatePage=()=>{
return (
<>
<View style={styles.view}>
<Text>Cate Page</Text>
</View>
</>
)
};
const styles=StyleSheet.create({
view:{
height:200,
width:200,
backgroundColor:"rgba(200,255,0,0.5)"
}
})
export default CatePage;
…/cate/catePage.js
import React from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
const MinePage=()=>{
return (
<>
<View style={styles.view}>
<Text>Mine Page</Text>
</View>
</>
)
};
const styles=StyleSheet.create({
view:{
height:200,
width:200,
backgroundColor:"rgba(200,255,0,0.5)"
}
});
export default MinePage;