React Native商城项目实战02 - 搭建主框架
1.安装插件，cd到项目根目录下执行: npm i react-native-tab-navigator --save 1 1 1.1阅读README.md可以了解该模块基本用法 2.主框架文件Main.js /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, Platform //判断当前运行的系统 } from 'react-native'; /*=============导入外部组件类==============*/ import TabNavigator from 'react-native-tab-navigator'; var Home = require('../Home/Home'); var Shop = require('../Shop/Shop'); var Mine = require('../Mine/Mine'); var More = require('../More/More'); // ES5 var Main = React.createClass({ // 初始化函数(变量是可以改变的,充当状态机的角色) getInitialState(){ return{ selectedTab:'home' // 默认选中的tabBar } }, render() { return ( <TabNavigator> {/*--首页--*/} <TabNavigator.Item title="首页" renderIcon={() => <Image source={{uri:'icon_tabbar_homepage'}} style={styles.iconStyle} />} renderSelectedIcon={() => <Image source={{uri:'icon_tabbar_homepage_selected'}} style={styles.selectedIconStyle} />} badgeText="1" selected={this.state.selectedTab === 'home'} onPress={() => this.setState({ selectedTab: 'home' })} > <Home /> </TabNavigator.Item> {/*--商家--*/} <TabNavigator.Item title="商家" renderIcon={() => <Image source={{uri:'icon_tabbar_merchant_normal'}} style={styles.iconStyle} />} renderSelectedIcon={() => <Image source={{uri:'icon_tabbar_merchant_selected'}} style={styles.selectedIconStyle} />} badgeText="1" selected={this.state.selectedTab === 'shop'} onPress={() => this.setState({ selectedTab: 'shop' })} > <Shop /> </TabNavigator.Item> {/*--我的--*/} <TabNavigator.Item title="我的" renderIcon={() => <Image source={{uri:'icon_tabbar_mine'}} style={styles.iconStyle} />} renderSelectedIcon={() => <Image source={{uri:'icon_tabbar_mine_selected'}} style={styles.selectedIconStyle} />} badgeText="1" selected={this.state.selectedTab === 'mine'} onPress={() => this.setState({ selectedTab: 'mine' })} > <Mine /> </TabNavigator.Item> {/*--更多--*/} <TabNavigator.Item title="更多" renderIcon={() => <Image source={{uri:'icon_tabbar_misc'}} style={styles.iconStyle} />} renderSelectedIcon={() => <Image source={{uri:'icon_tabbar_misc_selected'}} style={styles.selectedIconStyle} />} badgeText="1" onPress={() => this.setState({ selectedTab: 'more' })} selected={this.state.selectedTab === 'more'} > <More /> </TabNavigator.Item> </TabNavigator> ); } }); const styles = StyleSheet.create({ iconStyle:{ width: Platform.OS === 'ios' ? 30 : 25, height:Platform.OS === 'ios' ? 30 : 25, }, selectedIconStyle:{ width:Platform.OS === 'ios' ? 30 : 25, height:Platform.OS === 'ios' ? 30 : 25, }, }); // 输出 module.exports = Main; 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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 3.预览效果 安装效果
