ReactNative

2021-09-03 03:49:00

接触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

码农公寓

ListView

改名问题

Android返回键

跨导航通信

结语

相关文章