React Native顶-底部导航使用小技巧
|
导航一直是App开发中比较重要的一个组件，ReactNative提供了两种导航组件供我们使用，分别是：NavigatorIOS和Navigator，但是前者只能用于iOS平台，后者在ReactNative0.44版本以后已经被移除了。 好在有人提供了更好的导航组件，就是我们今天要讲的react-navigation，并且ReactNative官方更推荐我们使用此组件。 本篇文章只讲解基础用法，如果你想了解更多，请戳这里->戳我。 简介react-navigation主要包括导航，底部tab，顶部tab，侧滑等，分别为：
我们今天主要讲TabNavigator。 效果展示
实现代码import React,{ Component } from 'react';
import {
AppRegistry,StyleSheet,Button,Text,View,Image,StatusBar
} from 'react-native';
import { StackNavigator,TabBarBottom,TabNavigator } from "react-navigation";
class Home extends React.Component {
static navigationOptions = {
tabBarLabel: '热点',tabBarIcon: ({ focused,tintColor }) => (
<Image
source={focused ? require('../res/images/hot_hover.png') : require('../res/images/hot.png')}
style={{ width: 26,height: 26,tintColor: tintColor }}
/>
)
};
render() {
return (
<View style={styles.container}>
<Text>！这是热点</Text>
</View>
);
}
}
class Circle extends React.Component {
static navigationOptions = {
tabBarLabel: '圈子',tintColor }) => (
<Image
source={focused ? require('../res/images/coterie.png') : require('../res/images/coterie.png')}
style={{ width: 26,tintColor: tintColor }}
/>
)
};
render() {
return (
<View style={styles.container}>
<Text>！这是圈子</Text>
</View>
);
}
}
class Tools extends React.Component {
static navigationOptions = {
tabBarLabel: '工具',tintColor }) => (
<Image
source={focused ? require('../res/images/tool.png') : require('../res/images/tool.png')}
style={{ width: 26,tintColor: tintColor }}
/>
)
};
render() {
return (
<View style={styles.container}>
<Text>！这是工具</Text>
</View>
);
}
}
class Mypage extends React.Component {
static navigationOptions = {
tabBarLabel: '我的',tintColor }) => (
<Image
source={focused ? require('../res/images/my_hover.png') : require('../res/images/my.png')}
style={{ width: 26,tintColor: tintColor }}
/>
)
};
render() {
return (
<View style={styles.container}>
<Text>！这是我的</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#fff',}
});
const MyApp = TabNavigator(
{
Home: {
screen: Home,},Circle: {
screen: Circle,Tools: {
screen: Tools,Mypage: {
screen: Mypage,{
tabBarOptions: {
activeTintColor: '#4BC1D2',inactiveTintColor: '#000',showIcon: true,showLabel: true,upperCaseLabel: false,pressColor: '#823453',pressOpacity: 0.8,style: {
backgroundColor: '#fff',paddingBottom: 0,borderTopWidth: 0.5,borderTopColor: '#ccc',labelStyle: {
fontSize: 12,margin: 1
},indicatorStyle: { height: 0 },//android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了
},tabBarPosition: 'bottom',swipeEnabled: false,animationEnabled: false,lazy: true,backBehavior: 'none',});
module.exports = MyApp;
配置说明NavigationOptions TabNavigatorConfig
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |