从0到1写一个react native的app(上)

我是一个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