我是一个react-native的初学者,在学习完react-native的一些基本内容,比如,页面布局,列表渲染,事件处理,网络请求,路由跳转页面等等之后,我想做一个实战app来综合应用所学的知识。下面是我要实现的app,一个简单的github的app.
上图是在genemotion模拟器的效果,本文将从0到1讲解这个github APP的实现过程,希望对react-native的初学者有帮助,一些开发中遇到的坑我会和大家分享。前提是你已经搭建好rn的开发环境,我是使用window来开发rn。下面正式开始撸码姿势~
1.初始化项目
首先打开一个目录,初始化一个项目,这里我的项目名是github,这可能会花比较长的时间,请耐心等待。。
当你的项目初始化完成后,进入github项目目录,输入react-native run-android,启动项目(启动项目之前先开启的模拟器)。同样,输入这个命令后你需要等待一分钟,这个时候你会看到一个 js server的窗口自动启动
这里给大家介绍一个坑,在开发过程中,当你的server窗口未关闭时,你npm第三方模块是不成功的,或者你在启动server后在项目目录中增加图片,然后试图在代码中引用你新添加的图片时,js server也是会报错的。这个时候你需要先关闭js server窗口,再进行安装模块或者导入图片,再重新react-native run-android。
当你js server启动成功,而且你的项目也build成功之后你会看到
这时候,看看你的模拟器,你会看到一个react-antive的初始应用。如下图。
打开你模拟器上的menu菜单,开启热更新,这样你更改你的代码,就可以实时再你的模拟器上看到效果。
下面,我将简单的介绍一下这个初始代码,如果你已经掌握了rn的基础,请直接跳过这里。
左边是项目目录,你先在只需要关注index.android.js和index.ios.js两个文件,因为这是项目的入口文件。现在打开你的index.anddroid.js文件
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class github extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('github', () => github);
可以看到react-native的写法和react是一样的,组件仍然使用state作为组件的状态管理,用props接受参数,仍然是使用jsx语法,不同点主要有:①你使用的不再是html的标签而是使用rn给你提供的原生组件,比如<Button/> <Image/>等等。②你在定义样式的时候是通过StyleSheet.create的形式创建一个styles样式对象,然后再组件里面通过style属性引入样式即可。AppRegistry
模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。AppRegistry.registerComponent('github', () => github)这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致。
2.添加底部导航
现在我们不想把所有代码冗杂在index.android.js入口文件里面,我希望在入口文件里面import我们的主页组件。先添加一个js目录。
现在把你的index.android.js改成
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import HomePage from './js/pages/HomePage';
export default class github extends Component {
render() {
return (
<HomePage/>
);
}
}
AppRegistry.registerComponent('github', () => github);
现在我们需要写我们的HomePage组件(页面)了,这个页面包含一个底部导航栏,点击导航的图标,可以切换至不同的组件。lets do it..
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator'
export default class HomePage extends Component {
constructor(props){
sup