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

结尾:

文章来源：自己博客文章 https://www.cnblogs.com/ljx20180807/p/9908342.html
有些参考其他文章，链接忘了，望见谅；