本文记录的是react-navigation组件, 该组件由三大模块组成, 他们分别是:
TabNavigator:
表格(tab)导航，就像打开简书app会有一个底部导航: 首页、发现、消息、我的.
StackNavigator:
项(item)导航, 在简书里点击任意一个内容咨询，会从又往左过渡一个新的页面出来.
DrawerNavigator:
菜单(menu)导航，从屏幕左侧拖拽出来的菜单导航.
TabNavigator
import React from 'react';
import { AppRegistry, View, Text, StyleSheet } from 'react-native';
import { TabNavigator } from 'react-navigation';
const BaseTemplate = ({navigation, text}) => (
<View style={styles.indexText}>
<Text>{text}</Text>
</View>
);
const Home = ({ navigation }) => (
<BaseTemplate text='首页' navigation={navigation}/>
);
const Discover = ({ navigation }) => (
<BaseTemplate text='发现' navigation={navigation}/>
);
const Message = ({ navigation }) => (
<BaseTemplate text='消息' navigation={navigation}/>
);
const Profile = ({ navigation }) => (
<BaseTemplate text='我的' navigation={navigation}/>
);
const tabApp = TabNavigator(
{
Index: { screen: Home},
Discover: { screen: Discover},
Message: { screen: Message},
Profile: { screen: Profile},
},
);
const styles = StyleSheet.create({
indexText: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}
});
AppRegistry.registerComponent('toilet', () => tabApp);
默认样式.png
将导航英文换成中文
// 修改这里
const tabApp = TabNavigator(
{
Index: { screen: Home, navigationOptions: {tabBarLabel: '首页'} },
Discover: { screen: Discover, navigationOptions: {tabBarLabel: '发现'} },
Message: { screen: Message, navigationOptions: {tabBarLabel: '消息'} },
Profile: { screen: Profile, navigationOptions: {tabBarLabel: '我的'} },
},
);
加上中文.png
统一样式和统一过渡动效
// 重写TabNavigator
const tabApp = TabNavigator(
{
Index: { screen: Home, navigationOptions: {tabBarLabel: '首页'} },
Discover: { screen: Discover, navigationOptions: {tabBarLabel: '发现'} },
Message: { screen: Message, navigationOptions: {tabBarLabel: '消息'} },
Profile: { screen: Profile, navigationOptions: {tabBarLabel: '我的'} },
},
{
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
swipeEnabled: true,
animationEnabled: true,
lazy: false,
initialLayout: undefined,
}
);
统一样式.png
增加图标
备注: 这里需要根据图标官网针对ios和android.gradle分别进行配置, 目的是让指定的图标字体文件一同编译打包到app安装文件中, 这样的好处是没有网络请求, 当打开app时就即使写入到内存中, 就不会存在等待加载的过程.(启动页的原理也是这样).
这里附上官网说明链接:
ios设置、android设置
// 增加图标库导入
import Ionicons from 'react-native-vector-icons/Ionicons';
// 重写TabNavigator
const tabApp = TabNavigator(
{
Index: {
screen: Home,
navigationOptions: {
tabBarLabel: '首页',
tabBarIcon: ({ tintColor, focused }) => (
<Ionicons
name={ focused
? 'ios-home'
: 'ios-home-outline' }
size={26}
style={{ color: tintColor }}
/>)
}
},
Discover: {
screen: Discover,
navigationOptions: {
tabBarLabel: '发现',
tabBarIcon: ({ tintColor, focused }) => (
<Ionicons
name={ focused
? 'ios-compass'
: 'ios-compass-outline' }
size={26}
style={{ color: tintColor }}
/>)
}
},
Message: {
screen: Message,
navigationOptions: {
tabBarLabel: '消息',
tabBarIcon: ({ tintColor, focused }) => (
<Ionicons
name={ focused
? 'ios-notifications'
: 'ios-notifications-outline' }
size={26}
style={{ color: tintColor }}
/>)
}
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarLabel: '我的',
tabBarIcon: ({ tintColor, focused }) => (
<Ionicons
name={ focused
? 'ios-person'
: 'ios-person-outline' }
size={26}
style={{ color: tintColor }}
/>)
}
},
},
{
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
swipeEnabled: true,
animationEnabled: true,
lazy: false,
initialLayout: undefined,
}
);
增加图标.png
网友评论