欢迎界面搭建完毕,我们接下来需要做的就是搭建应用程序的主体框架啦。首先我们看一下首页的截图:
从图中看到,我将首页分为了三部分:用黑色矩形表示的头部,绿色表示的内容和红色表示的底部。
下面我们需要解决的是红色部分。在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 : {
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 }
我们根据点击的哪一个按钮跳转到相应的界面。