本篇简单介绍底部导航的配置，如果对文件目录有不了解的地方，请阅读作者之前的文章react-native项目的新建及路由配置
一、装包
安装
- npm i react-native-vector-icons --save
Link
- react-native link react-native-vector-icons
二、在navigation文件在配置
const BottomTab = createBottomTabNavigator(
{
Home: HomePage,
Home1:HomePage1
},
{
initialRouteName: 'Home',
defaultNavigationOptions: ({ navigation }) => ({
// not home router, hidden home bottom tab
tabBarVisible: navigation.state.index > 0 ? false : true,
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let icon = 'ios-home-outline'
if (routeName === 'Home') {
// iconName = `ios-information-circle${focused ? '' : '-outline'}`;
icon = 'md-home'
} else if (routeName === 'Home1') {
// iconName = `ios-options${focused ? '' : '-outline'}`;
icon = 'ios-home'
}
return <Ionicons
name={icon}
size={22}
style={{ color: focused ? '#9013fe' : '#ccc' }} />
},
}),
tabBarOptions: {
activeTintColor: '#9013fe',
inactiveTintColor: '#ccc',
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: '#FFF',
},
}
}
)
三、文件目录
image.png
四、文件
1、HomePage.js
import React from 'react';
import { StyleSheet, View, TouchableOpacity, Text, AsyncStorage } from 'react-native';
export default class HomePage extends React.Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
<View style={styles.view}>
<Text style={styles.text}>首页一</Text>
<TouchableOpacity style={styles.touch} onPress={()=>{this.props.navigation.navigate('TestPages')}}>
<Text>去玩儿本地存储</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
view: {
backgroundColor: '#fff',
width: '100%',
height: '100%',
flexDirection:'column',
justifyContent: 'center',
alignItems:'center',
},
text:{
width:100,
height:50,
textAlign:'center',
justifyContent:'center',
},
touch:{
width:200,
height:50,
marginTop:10,
backgroundColor:'#0f0',
justifyContent:'center',
alignItems:'center',
}
});
2、HomePage1.js
import React from 'react';
import { StyleSheet, View, TouchableOpacity, Text, AsyncStorage } from 'react-native';
export default class HomePage1 extends React.Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
<View style={styles.view}>
<Text style={styles.text}>首页二</Text>
<TouchableOpacity style={styles.touch} onPress={()=>{this.props.navigation.navigate('TestPages')}}>
<Text>去玩儿本地存储</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
view: {
backgroundColor: '#fff',
width: '100%',
height: '100%',
flexDirection:'column',
justifyContent: 'center',
alignItems:'center',
},
text:{
width:100,
height:50,
textAlign:'center',
justifyContent:'center',
},
touch:{
width:200,
height:50,
marginTop:10,
backgroundColor:'#0ff',
justifyContent:'center',
alignItems:'center',
}
});
3、TestPages.js
import React from 'react';
import { StyleSheet, View, TouchableOpacity, Text, AsyncStorage } from 'react-native';
export default class TestPages extends React.Component {
constructor(props) {
super(props)
this.state = {
text: '啥也没有',
}
}
render() {
return (
<View style={styles.view}>
<Text style={styles.text}>
{this.state.text}
</Text>
{/* 增加 */}
<TouchableOpacity style={styles.touch} onPress={() => {
AsyncStorage.setItem('text', '葫芦小金刚', (error) => {
error ? this.setState({ text: '增加失败' }) : this.setState({ text: '增加成功' })
})
}}>
<Text>增加</Text>
</TouchableOpacity>
{/* 删除 */}
<TouchableOpacity style={styles.touch} onPress={() => {
AsyncStorage.removeItem('text',(error)=>{
error ? this.setState({ text: '删除失败' }) : this.setState({ text: '删除成功' })
})
}}>
<Text>删除</Text>
</TouchableOpacity>
{/* 更改 */}
<TouchableOpacity style={styles.touch} onPress={() => {
AsyncStorage.setItem('text', '爷爷',(error)=>{
error ? this.setState({ text: '更改失败' }) : this.setState({ text: '更改成功' })
})
}}>
<Text>更改</Text>
</TouchableOpacity>
{/* 查询 */}
<TouchableOpacity style={styles.touch} onPress={() => {
AsyncStorage.getItem('text').then((value) => {
if (value) {
this.setState({
text: value,
})
}else{
this.setState({
text:'啥也没存'
})
}
})
}}>
<Text>查询</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
view: {
backgroundColor: '#fff',
width: '100%',
height: '100%',
flexDirection: 'column',
justifyContent: 'center',
alignItems:'center',
},
touch: {
width: 100,
height: 50,
marginTop:50,
backgroundColor: '#0f0',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
touchText: {
fontSize: 20,
color: '#000',
}
});
4、navigation文件夹下的index.js(路由文件)
import React, { Component } from 'react'
import { createStackNavigator, createAppContainer,createBottomTabNavigator,} from 'react-navigation'
import Ionicons from 'react-native-vector-icons/Ionicons'
import {
TestPages,
HomePage,
HomePage1
} from '../pages/index'
const BottomTab = createBottomTabNavigator(
{
Home: HomePage,
Home1:HomePage1
},
{
initialRouteName: 'Home',
defaultNavigationOptions: ({ navigation }) => ({
// not home router, hidden home bottom tab
tabBarVisible: navigation.state.index > 0 ? false : true,
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let icon = 'ios-home-outline'
if (routeName === 'Home') {
// iconName = `ios-information-circle${focused ? '' : '-outline'}`;
icon = 'md-home'
} else if (routeName === 'Home1') {
// iconName = `ios-options${focused ? '' : '-outline'}`;
icon = 'ios-home'
}
return <Ionicons
name={icon}
size={22}
style={{ color: focused ? '#9013fe' : '#ccc' }} />
},
}),
tabBarOptions: {
activeTintColor: '#9013fe',
inactiveTintColor: '#ccc',
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: '#FFF',
},
}
}
)
const SketchRouter = createStackNavigator(
{
BottomTab:{
screen:BottomTab,
navigationOptions: ({ navigation }) => ({
header: null
})
},
TestPages: {
screen: TestPages,
navigationOptions: ({ navigation }) => ({
header: null
})
},
},
{
headerBackTitleVisible: false,
}
)
export default createAppContainer(SketchRouter)
五、如何自定义底部导航图标？
1.
image.png
2.作者用的是这两个
image.png
记得要这样导入:import Ionicons from 'react-native-vector-icons/Ionicons'
这里边的Ionicons和蓝色圈圈里的是对应的。
注意！！！
如果对路由配置以及目录有不明白的一定要去看作者之前的文章，导入路径要写对
