时间戳

首页 > 技术文章 > 使用react-native做一个简单的应用－04界面主框架

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

weifengzz 2016-01-31 14:30 原文

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

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

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

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

　　MainRoute.js

  1 'use strict'
  2 
  3 import React from 'react-native'
  4 import Icon from 'react-native-vector-icons/FontAwesome'
  5 import MainScreen from './MainScreen'
  6 import LoginScreen from './UserLRScreen/LoginScreen'
  7 import RecommendScreen from './RecommendScreen'
  8 import SettingScreen from './SettingScreen'
  9 var {Platform} = React
 10 
 11 var {
 12   StyleSheet,
 13   View,
 14   TouchableOpacity,
 15   PropTypes
 16 } = React
 17 
 18 const COLOR = ['gray', '#ffffff']
 19 
 20 class MainRoute extends React.Component {
 21   static propTypes = {
 22     navigator: PropTypes.object,
 23     graphics: PropTypes.object
 24   };
 25   constructor (props) {
 26     super(props)
 27     var navigator = props.navigator
 28     this.state = {
 29       choice: 1,
 30       screen: <MainScreen navigator={navigator} />
 31     }
 32   }
 33   render () {
 34     return (
 35       <View style={styles.container}>
 36         <View style={styles.viewShow}>
 37           {this.state.screen}
 38         </View>
 39         <View style={styles.bottom}>
 40           <TouchableOpacity style={styles.bottomButton} activeOpacity={0.1} onPress ={() => this.tabColor(1)}>
 41             <Icon name='star' size={25} style={[styles.Icon, {color: this.state.choice === 1 ? COLOR[1] : COLOR[0]}]}/>
 42           </TouchableOpacity>
 43           <TouchableOpacity style={styles.bottomButton} onPress ={() => this.tabColor(2)} >
 44             <Icon name='compass' size={25} style={[styles.Icon, {color: this.state.choice === 2 ? COLOR[1] : COLOR[0]}]}/>
 45           </TouchableOpacity>
 46           <TouchableOpacity style={styles.bottomButton} onPress ={() => this.tabColor(3)}>
 47             <Icon name='bell' size={25} style={[styles.Icon, {color: this.state.choice === 3 ? COLOR[1] : COLOR[0]}]}/>
 48           </TouchableOpacity>
 49           <TouchableOpacity style={styles.bottomButton} onPress ={() => this.tabColor(4)}>
 50             <Icon name='cog' size={25} style={[styles.Icon, {color: this.state.choice === 4 ? COLOR[1] : COLOR[0]}]}/>
 51           </TouchableOpacity>
 52         </View>
 53       </View>
 54     )
 55   }
 56   tabColor (num) {
 57     var navigator = this.props.navigator
 58     if (num === 1) {
 59       this.setState({choice: 1, screen: <MainScreen navigator={navigator} />})
 60     }
 61     if (num === 2) {
 62       this.setState({choice: 2, screen: <RecommendScreen navigator={navigator} />})
 63     }
 64     if (num === 3) {
 65       this.setState({choice: 3, screen: <LoginScreen navigator={navigator} />})
 66     }
 67     if (num === 4) {
 68       this.setState({choice: 4, screen: <SettingScreen navigator={navigator} />})
 69     }
 70   }
 71 }
 72 
 73 var styles = StyleSheet.create({
 74   container: {
 75     marginTop: (Platform.OS === 'ios') ? 20 : 0,
 76     flex: 1,
 77     flexDirection: 'column',
 78     backgroundColor: 'black'
 79   },
 80   viewShow: {
 81     flex: 1
 82   },
 83   content: {
 84     flex: 8
 85   },
 86   bottom: {
 87     height: 50,
 88     backgroundColor: 'black',
 89     flexDirection: 'row'
 90   },
 91   buttonImage: {
 92     height: 30,
 93     width: 50
 94   },
 95   bottomButton: {
 96     flex: 1,
 97     alignItems: 'center',
 98     justifyContent: 'center'
 99   },
100   Icon: {
101     color: 'white'
102   }
103 })
104 
105 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实现点击效果：

 1   tabColor (num) {
 2     var navigator = this.props.navigator
 3     if (num === 1) {
 4       this.setState({choice: 1, screen: <MainScreen navigator={navigator} />})
 5     }
 6     if (num === 2) {
 7       this.setState({choice: 2, screen: <RecommendScreen navigator={navigator} />})
 8     }
 9     if (num === 3) {
10       this.setState({choice: 3, screen: <LoginScreen navigator={navigator} />})
11     }
12     if (num === 4) {
13       this.setState({choice: 4, screen: <SettingScreen navigator={navigator} />})
14     }
15   }

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

 

推荐阅读