React Native 开发日常、常见问题总结及解决

关注公众号： 微信搜索 web全栈进阶 ; 收货更多的干货

一、建议

看法：个人觉得 APP 开发性能 Flutter > React Native > Weex

难度：Flutter > React Native > Weex 有点尴尬

建议：Flutter 未来的趋势，赶紧学，赶紧干；大公司基本都用上了；

方法：可以关注 阿里 相关的 技术公众号，你能知道目前 热门技术及干货； 个人感觉前沿技术基本在 阿里系；跟着大公司的步伐学习不会错、不会脱轨

链接：Flutter 学习姿势可点击之前文章 一星期从入门到实际开发经验分享及总结

后续：后续这篇应该没有更新了；目前已转战至 Flutter， Flutter 系列问题可查看我之前文章

二、React Native 优点：

1、android、ios 端能保持 UI 页面的一致性、开发效率提升、节省开发时间及资源；

2、写 UI 快，跟写 HTML 差不多，flex 布局写起来很爽，而且跨平台；

3、调试方便，command + R 直接刷新 Simulator，不用像 Xcode 等待编译；

4、体验好于 Hybrid App，接近 Native App;

5、开发编译热更新爽歪歪、生态成熟强大

三、React Native 缺点：

1、很多不支持，像支付、分享等还没有对应的 RN 方案，需要分别调用 iOS、Android；

2、iOS、Android 部分组件中还存在差异，坑需要慢慢探索；

3、Android 中开启调试模式卡到爆

4、性能跟不上；对于动画频繁、长列表、交互复杂等业务;需要特殊处理，不然页面长时间会卡顿；

5、原生调试一些问题、BUG、及节点性能没有很好的工具很直观的复现

四、常见问题

1、<TextInput> iOS 中正常，Android 中会自带一条下划线，需要加一句

underlineColorAndroid="transparent"

2、 需要设置高度，iOS 中不设置会自适应展示，Android 中不设置显示不全

3、 让文本只在一行显示，超出显示...

TouchableOpacity numberOfLines={1}

4、lineHeight 在 Android 中不能设置为小数。要想一套代码适应 iOS 和 Android 的话，可以这样写：

flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',

5、如何让按钮按下不显示样式

TouchableOpacity 属性activeOpacity设置为1则激活时不设置透明度

6、zIndex 在 Android 中无效，后渲染的组件在上面。

7、没有 js 中的 show/hide 方法，需要根据属性判断是否渲染，比如：

{this.state.username && this.state.password ? (
    // 存在 username 和 password 时
    <View style={styles.login}>
        <Text style={styles.loginText}>已登陆</Text>
    </View>
) : (
    <TouchableOpacity style={styles.login} onPress={this._onPressLoginButton.bind(this)}>
        <View>
            <Text style={styles.loginText}>登陆</Text>
        </View>
    </TouchableOpacity>
)}

8、<ListView> 通过网络获取数据的 ListView 不能直接渲染，因为渲染时数据还没回来，RN 会因空数据报红

{this.state.data != null ? (
  <ListView style={styles.listView}
      dataSource={this.data} 
      renderRow={this.renderRow.bind(this)}/>
) : (
  null
)}

9、RN、OC 交互，callback 不能多于一个，否则 RN 会崩溃

10、 RN 判断当前设备运行的平台

// 通过引入Platform文件
const Platform = require('Platform');
render() {
  let platform = 'iOS';
  if(Platform.OS === 'android'){
    platform = 'android'
  }
  return ({platform});
}

11、RN.获取屏幕的宽和高

// 使用Dimensions
const Dimensions = require('Dimensions');
const {width,height} = Dimensions.get('window');
  
// 使用:
leftViewStyle:{
    width / 4,
},

12、RN 键盘回收

// 通过引入dismissKeyboard文件
const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard();

13、根据不同的平台设置不同的效果

// 先引入Platform:

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    Platform
} from 'react-native';
// 使用:

iconStyle:{
     Platform.OS === 'ios' ? 30 : 25,
    height: Platform.OS === 'ios' ? 30 : 25
},

14、Android去除TextInput下方的横线.

// TextInput使用属性
underlineColorAndroid = {'transparent'}

15、mac显示隐藏文件

// 终端运行下面的命令即可:
defaults write com.apple.finder AppleShowAllFiles -boolean true ; 
killall Finder

16、React-Native中禁用Navigator手势返回

 configureScene(route, routeStack) {   
  // return Navigator.SceneConfigs.PushFromRight;
  var conf = Navigator.SceneConfigs.HorizontalSwipeJump;
  conf.gestures = null;
  return conf;
 }

17、React-Native中拨打电话

import {Linking} from 'react-native';
function callPhone(){  　　
  return Linking.openURL('tel:10086')
}

18、Android下,Image控件不支持gif的解决方案

// 在android/app/build.gradle中的dependencies字段中添加以下内容
compile 'com.facebook.fresco:animated-gif:0.13.0'

19、ios下图片无法正常加载 由于ios系统限制无法直接使用http的请求 解决方案有两种

1、 修改配置文件让其支持http

2、 修改服务器为https方式

20、慎重调用setState方法

1、setState是不能随便调用的，只要你调用了其实就相当于调用了forceUpdate；

2、即使你并没有修改state里面的字段，系统还是会调用render

结尾:

1. 文章来源： 自己博客文章 https://www.cnblogs.com/ljx20180807/p/9908342.html

2. 有些参考其他文章，链接忘了，望见谅；