使用react-native做一个简单的应用－04界面主框架

欢迎界面搭建完毕，我们接下来需要做的就是搭建应用程序的主体框架啦。首先我们看一下首页的截图：

　　从图中看到，我将首页分为了三部分：用黑色矩形表示的头部，绿色表示的内容和红色表示的底部。

　　下面我们需要解决的是红色部分。在iOS中想要实现这个效果很简单，只需要使用react－native提供的组件TabBarIOS就可以啦。但是却没有提供Android的类似的组件。为了解决这个问题，我想了三种解决方式，第一种是分别为iOS和Android搭建界面，第二种是使用他人封装好的组件，第三种就是自己写一个。最后我选择了第三种，原因是如果使用第一种方式android的界面还是自己搭，而第二种我找了几个，发现样式的可定制性参差不齐，用了不知道会出什么事情。

　　从图片中我们很容易看出它充当的是页面跳转的作用，也可以认为它充当了一个路由的作用。我们点击不同的按钮跳转到相应的界面。

　　MainRoute.js

 'use strict'

 import React from 'react-native'
 import Icon from 'react-native-vector-icons/FontAwesome'
 import MainScreen from './MainScreen'
 import LoginScreen from './UserLRScreen/LoginScreen'
 import RecommendScreen from './RecommendScreen'
 import SettingScreen from './SettingScreen'
 var {Platform} = React

 var {
   StyleSheet,
   View,
   TouchableOpacity,
   PropTypes
 } = React

 const COLOR = ['gray', '#ffffff']

 class MainRoute extends React.Component {
   static propTypes = {
     navigator: PropTypes.object,
     graphics: PropTypes.object
   };
   constructor (props) {
     super(props)
     var navigator = props.navigator
     this.state = {
       choice: 1,
       screen: <MainScreen navigator={navigator} />
     }
   }
   render () {
     return (
       <View style={styles.container}>
         <View style={styles.viewShow}>
           {this.state.screen}
         </View>
         <View style={styles.bottom}>
           <TouchableOpacity style={styles.bottomButton} activeOpacity={0.1} onPress ={() => this.tabColor(1)}>
             <Icon name='star' size={25} style={[styles.Icon, {color: this.state.choice === 1 ? COLOR[1] : COLOR[0]}]}/>
           </TouchableOpacity>
           <TouchableOpacity style={styles.bottomButton} onPress ={() => this.tabColor(2)} >
             <Icon name='compass' size={25} style={[styles.Icon, {color: this.state.choice === 2 ? COLOR[1] : COLOR[0]}]}/>
           </TouchableOpacity>
           <TouchableOpacity style={styles.bottomButton} onPress ={() => this.tabColor(3)}>
             <Icon name='bell' size={25} style={[styles.Icon, {color: this.state.choice === 3 ? COLOR[1] : COLOR[0]}]}/>
           </TouchableOpacity>
           <TouchableOpacity style={styles.bottomButton} onPress ={() => this.tabColor(4)}>
             <Icon name='cog' size={25} style={[styles.Icon, {color: this.state.choice === 4 ? COLOR[1] : COLOR[0]}]}/>
           </TouchableOpacity>
         </View>
       </View>
     )
   }
   tabColor (num) {
     var navigator = this.props.navigator
     if (num === 1) {
       this.setState({choice: 1, screen: <MainScreen navigator={navigator} />})
     }
     if (num === 2) {
       this.setState({choice: 2, screen: <RecommendScreen navigator={navigator} />})
     }
     if (num === 3) {
       this.setState({choice: 3, screen: <LoginScreen navigator={navigator} />})
     }
     if (num === 4) {
       this.setState({choice: 4, screen: <SettingScreen navigator={navigator} />})
     }
   }
 }

 var styles = StyleSheet.create({
   container: {
     marginTop: (Platform.OS === 'ios') ? 20 : 0,
     flex: 1,
     flexDirection: 'column',
     backgroundColor: 'black'
   },
   viewShow: {
     flex: 1
   },
   content: {
     flex: 8
   },
   bottom: {
     height: 50,
     backgroundColor: 'black',
     flexDirection: 'row'
   },
   buttonImage: {
     height: 30,
     width: 50
   },
   bottomButton: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center'
   },
   Icon: {
     color: 'white'
   }
 })

 module.exports = MainRoute

上面的代码如果不懂也没有关系，我会一点点解释。

一：Icon

代码：import Icon from 'react-native-vector-icons/FontAwesome'

这是我引用的一个字体图标库，网址：https://github.com/oblador/react-native-vector-icons，Android和iOS使用方式里面介绍的很详细

这里我们会有很多Icon可以去选择。进去选一个自己认为合适的。

使用方式：

<Icon name='compass' size={25} />//name就是你选择的Icon的名称

二、界面

import MainScreen from './MainScreen'
import LoginScreen from './UserLRScreen/LoginScreen'
import RecommendScreen from './RecommendScreen'
import SettingScreen from './SettingScreen'

这是点击按钮需要进入的界面，这里我们还没有实现，可以搭建一个最简单的界面用于预览。

三、navigator

这是一个界面跳转组件，这个组件很重要，后面会有详细介绍。

四、TouchableOpacity

使用TouchableOpacity嵌套的组件，当我们用手点击的时候，会有一个点击动画。并且使用onPress实现点击效果：

   tabColor (num) {
     var navigator = this.props.navigator
     if (num === 1) {
       this.setState({choice: 1, screen: <MainScreen navigator={navigator} />})
     }
     if (num === 2) {
       this.setState({choice: 2, screen: <RecommendScreen navigator={navigator} />})
     }
     if (num === 3) {
       this.setState({choice: 3, screen: <LoginScreen navigator={navigator} />})
     }
     if (num === 4) {
       this.setState({choice: 4, screen: <SettingScreen navigator={navigator} />})
     }
   }

我们根据点击的哪一个按钮跳转到相应的界面。