使用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,
     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} />})
    }
  }

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