|
大概20天的时间，我从一个react-native小白开始做一个单词记忆APP，现在已经完成了过半的内容了，在这其中碰到了很多问题，也慢慢了解熟悉了很多东西，所以我写下这篇小结来回顾整理一下。
我的机器配置是：
windows 10 64位
红米note2 安卓5.0
react-native的安装与调试
关于安装
大部分的过程几乎和文档一致，这里有要注意的地方就是：
- 必须安装python 2版本，版本高的不支持。
- 安装C++编译组件，下载VS2015/VS2013能解决问题。
- node.js和npm的路径必须要全英文。
- 最好以管理员权限运行cmd来npm install安装项目依赖。
另外，因为我用的小米手机，必须要修改项目默认的几个点才能成功运行项目:
- 手机要关闭MIUI优化。
-
项目安卓目录下：build.gradle文件部分改为如下 dependencies {
classpath 'com.android.tools.build:gradle:1.2.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，不过也算是有个安慰吧。我觉得还是不能急，要想办法缩小问题出错的范围，就算用最笨的方法也能做到这点。如果实在是解决不了的小问题可以先放着，把重要的工作做完了再来查漏补缺。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
