【react-native】近期作项目の小结

大概20天的时间，我从一个react-native小白开始作一个单词记忆APP，如今已经完成了过半的内容了，在这其中碰到了不少问题，也慢慢了解熟悉了不少东西，因此我写下这篇小结来回顾整理一下。

个人机器配置是：
windows 10 64位
红米note2 安卓5.0

react-native的安装与调试

关于安装

大部分的过程几乎和文档一致，这里有要注意的地方就是：

1. 必须安装python 2版本，版本高的不支持。
2. 安装C++编译组件，下载VS2015/VS2013能解决问题。
3. node.js和npm的路径必需要全英文。
4. 最好以管理员权限运行cmd来npm install安装项目依赖。

另外，由于我用的小米手机，必需要修改项目默认的几个点才能成功运行项目:

1. 手机要关闭MIUI优化。

2. 项目安卓目录下：build.gradle文件部分改成以下

   dependencies {
          classpath 'com.android.tools.build:gradle:1.2.3'
   }

3. 项目安卓目录下：gradle/wrapper/gradle-wrapper文件的版本更改成gradle-2.4-all.zip。

第一次在真机中启动项目调试的时候，由于要下载gradle包因此可能会等待好久，它会根据上面的配置去下载对应的包在项目中。
另外手机中，若是出现项目没法载入的状况，须要手动摇动手机，选择Dev Settings-> Debug sever host & port for device，输入本机的ip:端口号（react-native默认是8081），再退出程序从新载入就能够了。

关于刷新和调试

刷新编译
每次react-native项目的启动时间都大概在1min左右，有点长，若是想要减小时间，能够直接在手机中摇动弹出菜单，选择reload，会从新编译更新。
若是不想手动载入，能够选择菜单中的Enable Hot Reloading开启热更新，即当代码发生改变系统会自动更新，可是这样也容易出现错误,若是是写循环的状况下还可能会卡死。

调试
1.打开另外一个窗口，进入项目地址，输入react-native log-android，能够对控制台进行监控。
2.摇晃手机出现菜单，能够选择在Chrome中进行调试，浏览器会自动弹出一个页面，而后能够在控制台进行监控。

react-navigation

官方的Navigator组件已被抛弃，目前市面上最经常使用的就是react-navigation和react-native-router-flux。个人项目中选用了react-navigation，不过react-navigation的官方文档能够说是很是简洁了，一不留神就出BUG了。

需求一：底部导航栏
使用react-navigation中的TabNavigator。

• 默认状况下是顶部的tabBar，要引入TabBarBottom。
• 我在出口的文件中部署了整个项目的页面，我看不少人都是直接在这里也顺便把tabBarIcon也自定义渲染更新，可是运行项目的时候老是出错。后来试了不少次解决方法是把Icon放入单个页面的navigationOptions去渲染。
• 安卓默认状况下是不渲染图标，须要在tabBarOptions中设置showIcon为true。

如何自定义图标导航？
能够本身封装一个组件，TabNavigator提供tintColor和focused属性，可让你去判断选中状态来更改。

tabBarIcon: ({tintColor,focused}) => ( //你的代码 )

需求二：记录全部的页面，支持跳转
使用react-navigation中的StackNavigator。
StackNavigator记录的页面都会有一个头部来代表这个页面的信息。
在总的出口文件中记录下全部的页面，取好名字，直接接触的页面都会被传入一个navigation，利用这个navigation就能够完成页面的跳转。

页面修改头部导航？

• 若是不想要这个导航，能够在那个页面的navigationOptions中写下header:null。
• 设置headerLeft和headerRight能够修改头部左右的按钮，不要就写null。
• 文字不居中，是由于要不左右都得没按钮，要不都得有，能够放一个空按钮占位置。
• 消除导航阴影，在headerStyle中写：elevation: 0。
• 想要使用navigation，就写成函数形式：static navigationOptions = ({ navigation}) => ({})
• 想要向其中传入参数，须要在componentDidMount()中使用 this.props.navigation.setParams传入参数，而后调用[navigation.state.params.参数名]就能够用到，可是必须先判断navigation.state.params是否存在，不然会报错。可能一开始尚未传入参数但界面已经被渲染出来，若参数被更新了数据就会被从新渲染出来。（我这里还碰到了页面卡死的状况，目前缘由还不明确）

需求三：欢迎页面事后，不能返回
由于StackNavigator会记下上个通过的页面，若是不但愿它保留状态，就不能使用navigate而是使用reset重置记忆，详情请看官方文档。

需求四：在子组件中能使用react-navigation的API
只要把navigation传递给子组件就能够了，而后调用this.props.navigation。

需求五：在StackNavigator中镶嵌TabNavigator
也就是在一个页面中，通常可能出现头部的选择来切换几个页面。
这种状况下咱们须要多设置一个wrapper页面，把这个页面记录在出口的页面中。这个页面要渲染一个tabNavigator，包裹起来。
须要注意的就是在wrapper页面中，除了要传递navigation外，要把tab的router给wrapper页面，不然会报错：
Wrapper.router = Screen.router;

mobx

用于管理数据的一个小工具，很容易入手。
必需要安装解析ES7的工具来解析装饰模式，在项目的.babelrc中写入"plugins": ["transform-decorators-legacy"]，而且安装

npm install babel-plugin-transform-decorators-legacy --save-dev

还要安装

npm install babel-preset-stage-1

由于编译器默认状况下并不会开启ES7支持模式。
在出口文件中想要调用Provider来注入全部的数据，请使用class来包裹，不要定义const来return。
另外在须要数据的类前加上@inject('rootStore')和@observer，这样类里面就能够直接调用this.props.rootStore来获取数据了。

其余组件

react-native-sound
播放的声音组件，mp3和wav格式都支持，网络连接的音频也支持。可是文件名必需要全小写。还有一个容易出错的地方就是声音载入的代码应该写在class前面，异步进行的动做，很容易出现声音未载入完就去播放声音，因而就出错了。

react-native-root-toast
https://github.com/magicismig...
一款简单的黑色透明提示toast，不过若是是想点击调用，就只能使用定义变量的那种方法，另外一种在ComponetDidMount()中调用的是界面一渲染成功就显示的状况。网上还有一个react-native-easy-toast，可是不知道为何用那个在手机上运行时一直出现不了效果，因此弃用了。

react-native-flexi-radio-button
radio组件，使用很简单，可是有个缺点就是在手机上看的时候有锯齿，不知道有没有解决的方法？要指定默认的值，使用selectedIndex属性。

react-native-popup-dialog
是一个弹出框组件，挺好看的，可是它只能渲染到所在组件的大小，并且和ScrollView一块儿出现的时候，它渲染出来的大小只能遮住一个屏幕，我还在寻找看看有没有解决的方法。

其余思考

这些日子，个人进度其实仍是挺慢的，由于我遇到了不少本身不太知道缘由的问题，出错的代码指示都不精确。身边也没有什么前辈，因此一方面除了上网搜索也没什么特别的解决方法，不事后来我加了一个群，你们在里面的讨论气氛都很好，虽然本身的大部分问题也没人能帮我T-T，不过也算是有个安慰吧。我以为仍是不能急，要想办法缩小问题出错的范围，就算用最笨的方法也能作到这点。若是实在是解决不了的小问题能够先放着，把重要的工做作完了再来查漏补缺。