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

前端之家收集整理的这篇文章主要介绍了【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,不过也算是有个安慰吧。我觉得还是不能急,要想办法缩小问题出错的范围,就算用最笨的方法也能做到这点。如果实在是解决不了的小问题可以先放着,把重要的工作做完了再来查漏补缺。

原文链接:https://www.f2er.com/react/301959.html

猜你在找的React相关文章