ReactNative
接触ReactNative也已经一段时间了，把自己遇到的一些问题总结出来希望能帮助到正在踩坑的人。
ListView
ListView是RN中的使用频率非常高的组件，问题却也层出不穷,FlatList等列表组件类似。
首先是row中的视图不能随着state或Mobx而实时更新，如果把样式绑定到state中使用this.setState()方法更改数据后会发现，更改数据后视图无法更改，只有新渲染的row才会应用新的样式。解决方法是将row单独抽离为一个组件，然后可以完美更改。
将row单独分离后可以更改单个row的样式，但是需要批量更改样式时就又遇到不能同时更改视图的问题。如下示例(FlatList)：
import Item from './item'
...
_renderItem({item}) {
return (
<Item
style={[styles.bookText,this.state.night ? {color: '#4e534f'} : null,{fontSize: this.state.fontsize,lineHeight: 2*this.sta.fontsize},]}
allowFontScaling = {false}
onPress = {() => {this._changeFloatNav()}}>{item.content}</Text>
)
}会发现更改this.state.fontsize后视图不更新，解决方法是走一下render方法，然后视图可以重新渲染。
- ListView的initialListSize属性设置的行数大的话会极大的拖累性能。
改名问题
当初google如何给ReactNative app改名时得到的结果相当easy，但是当我更改相应配置后突如其来的错误让我一脸懵逼，仔细研究后才知道，改名后必须重新启动cmd或powershell，卸载本地deBug版本app，否则会报错。
Android返回键
Android对于返回键的检测是App开发中必不可少的，但是返回键事件解绑却有一个大坑，如果解绑时的条件不能让back绑定的函数返回false，则解绑失败，会覆盖上一页的back事件。如下示例，为一个模态窗的back事件，当模态窗打开时，按返回键关闭模态窗并阻断返回上一页。如果在模态窗开启的情况下使用函数方法返回上一页（例：this.props.navigation.goBack()）就会导致解绑失败。
正确方法是在返回前将this.state.visible状态改为false，此时解绑正确。
componentWillMount() {
if (Platform.OS === 'android') {
BackHandler.addEventListener('hardwareBackPress', this._onBackAndroid.bind(this))
}
}
componentWillUnmount() {
if (Platform.OS === 'android') {
BackHandler.removeEventListener('hardwareBackPress', this._onBackAndroid);
}
}
_onBackAndroid() {
if(this.state.visible){
this._hide()
return true
}
return false
}跨导航通信
现在相信大家导航组件一般都会使用facebook强力推荐的react-navigation，虽然官方号称性能可以媲美原生，但是坑也是异常的多啊。。。（IOS貌似没有问题）
首先是和ViewPagerAndroid组件冲突，滑动异常，不能正确交互。导致轮播图都要用ScrollView去做。。。还有就是导航组件间不能通信。
app中登录模块是必不可少的，但是导航栏之间不能通信，就决定了不能在其它导航登录后更改个人中心页的登录状态。
这个问题貌似无解，只能依靠状态管理框架去做。博主使用的是Mobx，网上如何把Mobx和ReactNative结合的教程很多，可以自行google。这里贴出如何跨导航通信的示例。
首先是注册一个全局的变量，存放登录状态。
// MobxLocal.js
'use strict'
import {observable, action} from 'mobx'
// 声明类，用户信息
class UserInfo {
@observable
logoSta = false
@observable
money = 0
@observable
sex = '女'
@observable
introduction = '这个人很懒，还没有写简介。'
@observable
info = null
// 改变数据方法，
@action _upData(data) {
for(let item in data) {
if(this[item] === undefined){throw(new Error(item+' is undefined!'))}
this[item] = data[item]
}
}
}
global.userInfo = new UserInfo() // 绑定为全局变量
然后在入口文件执行JavaScript代码
// index.android.js
import './app/common/MobxLocal'将userinfo绑定到用户中心，然后在其它导航页登录后可以用相应的方法改变数据，用户中心的视图也会实时更改。
要注意的是登录结果显示模块必须要注册为mobx组件。如下示例：
// userInfo.js
import {observer} from 'mobx-react/native'
@observer
class User extends Component {
constructor(props){
super(props)
}
render(
return(...)
)
}// 更改数据方法调用
...
userInfo._upData({logoSta: true, sex: '男'})
...结语
ReactNative的坑有许多，大部分网上都可以找到，这些问题是我在做项目时遇到的，网上不太容易找到的一些问题，此文长期更新，有新的问题我会加到文章中。
文章原址：http://blog.csdn.net/qq_25243451/article/details/78089089
