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

新建react native项目

• 搭建开发环境
• 使用React Navigation实现页面跳转
• 使用axios网络库
• 使用redux管理数据状态
• • 基本概念：
  • 其他函数
  • 使用connect装饰器
  • redux工作流程
  • 相关代码：

搭建开发环境

参考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：

  <ButtononPress={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>);}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！