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.jsimport './app/common/MobxLocal'

将userinfo绑定到用户中心，然后在其它导航页登录后可以用相应的方法改变数据，用户中心的视图也会实时更改。

要注意的是登录结果显示模块必须要注册为mobx组件。如下示例：

// userInfo.js  import {observer} from 'mobx-react/native'@observerclass User extends Component {  constructor(props){    super(props)  }  render(    return(...)  )}

// 更改数据方法调用...userInfo._upData({logoSta: true, sex: '男'})...

---

结语

ReactNative的坑有许多，大部分网上都可以找到，这些问题是我在做项目时遇到的，网上不太容易找到的一些问题，此文长期更新，有新的问题我会加到文章中。
文章原址：http://blog.csdn.net/qq_25243451/article/details/78089089