第一部分 生成底部菜单
底部菜单使用的是react-native-tab-navigatorz 这个组件。首先安装
|
1 |
npm install react-native-tab-navigator --save |
然后引入即可使用：
|
1 |
import TabNavigator from 'react-native-tab-navigator'; |
主题，引入了之后要重启客户端，否则不能识别到npm安装的组件
生成底部菜单的代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
import React, { Component } from 'react'; import { Text, View,Image,StyleSheet } from 'react-native'; import TabNavigator from 'react-native-tab-navigator'; export default class HelloWorldApp extends Component { constructor(props){ super(props); this.state={ selectedTab:'home', } } render() { return ( <TabNavigator> <TabNavigator.Item selected={this.state.selectedTab === 'tb_popular'} title="最热" selectedTitleStyle={{color:'red'}} renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')} />} renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />} badgeText="1" onPress={() => this.setState({ selectedTab: 'tb_popular' })}> <View style={styles.page1}></View> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === 'tb_trending'} selectedTitleStyle={{color:'red'}} title="趋势" renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')} />} renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />} onPress={() => this.setState({ selectedTab: 'tb_trending' })}> <View style={styles.page2}></View> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === 'tb_favorite'} title="收藏" selectedTitleStyle={{color:'red'}} renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')} />} renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />} badgeText="1" onPress={() => this.setState({ selectedTab: 'tb_favorite' })}> <View style={styles.page1}></View> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === 'tb_my'} selectedTitleStyle={{color:'red'}} title="我的" renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')} />} renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />} onPress={() => this.setState({ selectedTab: 'tb_my' })}> <View style={styles.page2}></View> </TabNavigator.Item> </TabNavigator> ); } } const styles = StyleSheet.create({ page1:{ flex: 1, backgroundColor:'red', }, page2:{ flex: 1, backgroundColor:'yellow', }, image:{ height:22, width:22 } }); |
总结：
1.改变选中图标的颜色使用了tintColor
|
1 |
renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />} |
2.改变选中文字颜色的使用的是
|
1 |
selectedTitleStyle={{color:'red'}} |
3.使用组件的三个步骤
安装 -> 导入 -> 使用
第二部分 Navigator的使用
Navigator是
1.一个导航组件。
2.功能是进入下一个界面或者返回上一个界面。
3.能够传递数据给下一个界面，返回数据给上一个界面。
如何使用：
1.导入Navigator（是自带的，不需要安装）
2.reader中返回Navigator
3.调用Navigator的响应方法
