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

上一篇:vue如何像Element那样封装组件


下一篇:知道面试题为什么都爱给 window 加 name 属性吗?