第一次使用react-native后的总结
关于RN的介绍就不多说了，已经好几年了，如今RN的生态圈也已经很成熟了，
基本配套的UI和插件，95%都能找到,如果你有react的基础，1-2天内上手是
没有问题的，如果你没有接触过react，可能需要几天时间适应它的写法，除了对
于前端开发的来说，配置安卓开发环境麻烦点，可能一部分小伙伴，因为这个配
置环境问题就放弃了，window系统有点麻烦，mac系统1小时左右吧，网速快的话
加上爬梯子，估计用不了1小时。但如果你真想学这个东西，就必须待过这一关！
关于RN的基础组件，熟记的有Text文本组件，image 组件，View组件，这几个是最常用的，基本写的最多的
就是View组件，样式呢最常用的就是flex布局!
首先，如果你是第一次写RN，或者需要你自己搭项目架子干活，你就要考虑这个架子结构了，以及选择什么UI了，
要考虑路由跳转，还要考虑你项目要不要使用redux，与后台对接用哪个网络请求，本地存储，
公共组件封装复用性等.
不对RN技术好不好用做任何评价，每个人的用过后的感受不同，不要纠结是用RN，flutter，
weex，nativescript啊，反正不是很推荐后两个，你可以在RN 和 flutter 中选择一个
基础视频教程:
https://search.bilibili.com/all?keyword=react native&from_source=banner_search
实战项目
https://coding.imooc.com/class/89.html（账号：15138798639，密码：qin15138）
## 源码目录结构（给第一次搭RN架子的小伙伴一个参考）
|-- android
|-- bundles
|-- ios
|-- node_modules
|-- src // 项目源代码目录，文件名也可以写 lib
|-- router // 配置所有路由
|-- icons // 放置本地所有的icon图标
|-- imgs // 放置本地图片
|-- components // 放置公共组件
|-- theme // 配置的皮肤 ，根据项目需要自己选择
|-- utils // 封装所有的工具函数
|-- redux // 数据仓库（这几个文件是把redux进行拆分）
|-- actions.js
|-- reducers.js
|-- store.js
|-- types.js
|-- views // 所有的页面（这里你可以根据功能再继续划分）你也可以用pages
|-- home // 首页
|-- list // 列表
|-- shopcar // 购物车
|-- myself // 个人中心
|-- App.js // 跟组件
配置android,ios 快速启动,再package.json 中
"scripts": {
"start": "react-native run-android",
"ios": "react-native run-ios",
},
运行
// 安卓
# npm start
// ios
# npm run ios
路由选择
官方推荐
https://reactnavigation.org/docs/zh-Hans/navigation-views.html
第三方封装
https://github.com/aksonov/react-native-router-flux
关于以上两个路由，个人推荐使用官方推荐的路由，第二个封装好的虽然也很好用，但还是有一个连点触发同一个屏幕出现两次的问题
官方路由 单独抽离出来的实例
在router 文件夹下的 index.js中,
安装 ... 省略
// 将所有的路由单独抽离出一个单独的文件
import { createStackNavigator, createAppContainer } from "react-navigation";
// createStackNavigator 是一个返回 React 组件的方法
import Home from './Home'
import Find from './Find'
// 第一种写法
// const AppNavigator = createStackNavigator({
// Home: { screen: Home }
// });
/**
* 简写
*/
// createStackNavigator是一个函数，它接受一个路由配置对象和一个可选对象并返回一个 React 组件。
// 路由配置对象中的key是路由名称，value是该路由的配置。 配置中唯一必须的属性是screen（用于路由的组件）。
const AppNavigator = createStackNavigator(
{
Home,
Find
},
{
initialRouteName: "Home",
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}
);
export default createAppContainer(AppNavigator);
路由挂载（注意引入路径）
import React, { Component } from 'react'
import Router from './view/router'
class App extends Component {
render() {
return (
<Router />
)
}
}
export default App;
路由跳转(注意防重复点击出现多个相同的屏幕)
// 这种跳转方法，不会触发多次点击跳转相同的路由地址，它只会执行一次，向路由栈中推入路由
this.props.navigation.navigate('路由的key值')
// 这种跳转方法，我们会向导航堆栈中添加新路由，
// 多次点击跳转同一个路由，每次都会触发跳转到要调入的路由，会多次执行想路由栈添加路由
this.props.navigation.push('路由的key值')
// 返回上一级页面
this.props.navigation.goBack()
路由传参
/**
* 需要将参数包装成一个对象，作为navigation.navigate方法的第二个参数传递给路由。
* 如： * this.props.navigation.navigate('RouteName', { params go here })
*
* 读取页面组件中的参数的方法：this.props.navigation.state.params。
*/
// 1.第一种传参
this.props.navigation.navigate('Find', {
obj:{
itemId: 86,
otherParam: 'anything you want here',
}
})
// 第一种传参，取参数
this.props.navigation.getParam('obj')
// 第二种传参
this.props.navigation.navigate('Find', {
itemId: 86,
otherParam: 'anything you want here',
})
// 第二种传参 取参数
this.props.navigation.state.params
// 3 如果你想通过 prop 直接访问 params（例如： this.props.itemId）而不this.props.navigation.getParam，您可以使用社区开发的 react-navigation-props-mapper软件包。
/**
navigate接受可选的第二个参数，以便将参数传递给要导航到的路由。 例如：this.props.navigation.navigate('RouteName', {paramName: 'value'})。
我们可以使用this.props.navigation.getParam读取参数
你也可以使用 this.props.navigation.state.params作为getParam的替代方案， 如果未指定参数，它的值是 null。
*/
路由配置顶部导航
// 导航上的文字直接在各自的组件中
// 配置title属性，值可以是个字符串，也可以是个组件
class Home extends React.Component {
static navigationOptions = {
title: 'Home',
};
/* render function, etc */
}
/**
* 在标题中使用参数
*/
class DetailsScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('otherParam', 'A Nested Details Screen'),
};
};
/* render function, etc */
}
/**
* 使用setParams更新navigationOptions(导航上的配置)，用this.props.navigation.setParams来做到这一点
*/
/* Inside of render() */
<Button
title="Update the title"
onPress={() => this.props.navigation.setParams({otherParam: 'Updated!'})}
/>
/**
* 调整标题样式
* headerStyle：一个应用于 header 的最外层 View 的 样式对象， 如果你设置 backgroundColor ，他就是header 的颜色。
headerTintColor：返回按钮和标题都使用这个属性作为它们的颜色。 在下面的例子中，我们将 tint color 设置为白色（#fff），所以返回按钮和标题栏标题将变为白色。
headerTitleStyle：如果我们想为标题定制fontFamily，fontWeight和其他Text样式属性，我们可以用它来完成。
*/
// 只再当前路由有效果
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
/* render function, etc */
}
// 一次配置受用终身，再路由的全局上配置
const AppNavigator = createStackNavigator(
{
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
);
关于与后台对接，使用featch封装 get – post （参考例子）
关于过期处理，请求延时自己处理
// 定义一个常量,用来切换测试包和正是包的接口地址
const dev = "你的接口地址";
/**
* @class Http api接口类
* @method get || post get/post请求方法
* @param {url:'传入的url'，params：“传入的参数，一般是个对象”}
*
*/
export default class Http {
// 静态方法 get请求
static get(url, params) {
url = dev + url;
console.log(url);
//判断有木有参数
if (params) {
// 定一个空数组
let paramsArray = [];
// 拆分对象
Object.keys(params).forEach(key =>
paramsArray.push(key + "=" + params[key])
);
//判断是否地址拼接的有没有 ？,当没有的时候，使用 ？拼接第一个参数果有参数拼接，则用&符号拼接后边的参数
if (url.search(/?/) === -1) {
url = url + "?" + paramsArray.join("&");
} else {
url = url + "&" + paramsArray.join("&");
}
}
// 返回一个promise
return new Promise((resolve,reject) => {
//fetch请求
fetch(url, { method: "GET" })
.then(response => response.json())
.then(result => {
resolve(result);
})
.catch(error => {
reject(error);
});
});
}
// post请求封装
static post(url, obj) {
url = dev + url;
// console.log(url)
return new Promise((resolve, reject) => {
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(obj)
})
.then(response => response.json())
.then(result => {
// console.log(result)
resolve(result)
}).catch(error=>{
reject(error)
});
});
}
}
调用 方法
// 先倒入这个js文件
import js_name from '你的文件路径'
// 在你获取接口数据的函数中调用静态方法
js_name.get(); // get请求获取数据
js_name.post(); // post请求传数据
UI库选择(直接github 搜吧，不放链接地址了)
teaset // 国人开发的中文版文档的UI库，功能简单，不过弹窗有点坑
mobile.ant.design // 阿里开源的的带有中文版文档的一个UI库，但属于个人开发的，star数不高
react-native-ui-kitten // 外国人开发的UI库，英文文档
react-native-paper // 高仿谷歌material风格的UI库
react-native-material-ui // 仿谷歌material风格的UI库
eact-native-elements // 社区开发的一个UI,start数很高，然而组件并不是很丰富
插件总结(直接在github 上 或者npm 上搜吧)
react-native-vector-icons // RN图标库
react-native-image-pickerRN // 调用相机和相册
react-native-app-intro //RN的闪屏页，基于react-native-swiper组件再开发
react-native-shadow //RN阴影处理
react-native-scrollable-tab-view //RN中扁平风格的Tab选项卡
react-native-blur //RN中四周圆角的Tab选项卡
react-native-popup-dialog //RN 弹出框
react-native-image-crop-picker //RN全屏查看图片
react-native-gifted-form //RN表单插件
gl-react-native-v2 //RN背景色渐变,让图片以不同的动画方式展示出来，图片虚化等
react-native-calendars //RN 日历插件
react-native-swipeout //RN中iOS风格的swipeout按钮，可以实现滑动后，在右侧或左侧出现几个按钮
react-native-textinput-effects // RN中带动画风格的输入框
react-native-modalbox // RN中可以下滑关闭的弹窗，支持多种弹窗位置
react-native-lightbox // RN中点击某个图片||盒子后进入全屏
react-native-splash-screen // RN中的启动画面，在加载应用程序时隐藏
react-native-action-button // RN中可定制多动作的按钮,包括按钮旋转
react-native-foldview // RN中可折叠的列表块
react-native-spinkit // RN中动画的loading
react-virgin // RN中底部导航tab切换
react-native-parallax-scroll-view // RN中向上滑动列表时，隐藏顶部的某个块级盒子，向下滑动时，动画放大的形式显示隐藏的元素
react-native-tableview // RN中列表组件
react-native-keyboard-spacer // 解决RN中ios上的键盘遮挡输入框，RN高本不支持
react-native-datepicker // RN中多种展示形式的日历插件
react-native-orientation // RN中监听设备的方向改变
react-native-picker // RN中底部弹出显示的三级城市联动
react-native-circular-progress // RN中的圆环，类似于echarts的环形图
react-native-tinder-swipe-cards // RN中带动画的卡片，使用场景不详
react-native-collapsible // RN中的动画可折叠组件，适用于手风琴，切换等
react-native-charts-wrapper // RN中Echarts图表
react-native-image-viewer // RN中的图片放大查看
react-native-sglistview // RN中对用户操作ListView列表后的位置记忆实现
react-native-pathjs-charts // RN中图表实现,同echarts
react-native-fast-image // RN中图片规则瀑布流，无限滚动
react-native-loading-spinner-overlay // RN中自定义loading加载gif图
react-native-search-bar // RN中图片文字都在中间的搜索框
react-native-qrcode // RN中二维码生成器
tcomb-form-native // RN中Form表单
react-native-storage // RN中本地存储
react-native-progress // RN中的加载进度条
react-native-data-table // RN中的表格插件,带检索匹配，由于使用率不高，Start数很低
react-native-echarts // RN中的Echarts图表插件
react-native-dropdownalert // RN中仿自带的Alert组件的提示语弹窗
react-native-simple-radio-button // RN中动画单选按钮组件Radio
react-native-interactable // 有很强交互效果的table视图
react-native-simple-markdown // markdown编辑器
react-native-img-cache // 图片缓存
GirdShow-React-Native // RN中的表格插件，由于使用率不高，Start数很低
lottie-react-native // RN动画库
react-native-maps // RN地图插件
react-native-swiper // RN轮播图
react-native-drawer // RN侧滑抽屉
react-native-material-kit // RN中仿谷歌的Material Design风格的Buttons
react-native-svg // RN中的使用svg图
react-native-storage // 本地存储
react-native-code-push // 代码远程热更新