使用 react-navigation + axios + redux新建react-native项目

搭建开发环境

参考react native 官网搭建开发环境：
https://reactnative.cn/docs/getting-started.html
新建项目：

react-native init RNApp

然后打开 ios/RNApp.xcodeproj ，在xcode中运行项目。
编译失败：

解决办法：
cd RNApp/node_modules/react-native/third-party/glog-0.3.4
然后执行 ./configure， 如下所示：

然后再次运行，又遇到另一个问题

解决办法：
找到这个文件，删除再添加。

重新编译运行就可以了。app的入口是index.js文件：

import {
    AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('RNApp', () => App);

在index.js中，将App注册为项目的根组件，运行项目后首先看到的是App.js渲染出的页面。

接下来加入路由跳转，网络请求和redux管理数据。
总的文件目录结构如下：

使用React Navigation实现页面跳转

搭建好一个新项目之后，要使用导航实现页面跳转，可以使用RN官方推荐的react-navigation库。文档链接：https://reactnavigation.org/docs/en/getting-started.html
首先安装navigation包：

yarn add react-navigation

为了项目结构看起来更清楚，在项目的根目录下建一个app文件夹，然后在里面建一个index.js文件作为 APP 的根组件。同时将index中注册的组件改成app下的index：

import {
    AppRegistry } from 'react-native';
import App from './app/index';

AppRegistry.registerComponent('RNApp', () => App);

在app中新建一个pages文件夹，用来放APP的页面，然后在pages中新建两个页面，分别为MainScreen.js和DetailScreen.js。
在MainScreen中放一个button：

  <Button
    onPress={
   this.gotDetail}
    title="进入详情"
    color="#841584"
  />

点击进入DetailScreen页面，详情中放一个text:

  <Text>
  	DetailScreen
  </Text>

然后在app中新建一个route.js文件，对路由进行配置：

import {
    createStackNavigator } from 'react-navigation';
import MainSreen from './pages/MainSreen';
import DetailScreen from './pages/DetailScreen';

const RootStack = createStackNavigator(
  {
   
    Home: MainSreen,
    Details: DetailScreen,
  },
  {
   
    initialRouteName: 'Home',
  }
);

export default RootStack;

在route.js中使用createStackNavigator创建了一个路由栈，在路由栈配置了Home和Details两个路由，初始路由是Home。
在app/index.js中调用RootStack组件，

import React, {
    Component } from 'react';
import {
    View } from 'react-native';
import RootStack from './router';

export default class App extends Component {
   
  render() {
   
    return (
      <View style={
   {
    flex: 1 }}>
        <RootStack />
      </View>
    );
  }
}

然后在MainScreen.js中添加点击进入详情的事件：

  gotoDetail = (id) => {