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

优点：

1、写 UI 快，跟写 HTML 差不多，flex 布局写起来很爽，而且跨平台；
2、调试方便，command + R 直接刷新 Simulator，不用像 Xcode 等待编译；
3、体验好于 Hybrid App，接近 Native App;
4、热更新

缺点：

1、很多不支持，像支付、分享等还没有对应的 RN 方案，需要分别调用 iOS、Android；
2、iOS、Android 部分组件中还存在差异，坑需要慢慢探索；
3、Android 中开启调试模式卡到爆

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

underlineColorAndroid="transparent"

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

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

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

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

5、没有 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>
    )
}

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

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

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

8、.获取屏幕的宽和高

使用Dimensions

var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window');

使用:

leftViewStyle:{
   width: width / ,
},

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

先引入Platform:

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

使用:

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

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

在TextInput中使用underlineColorAndroid = {'transparent'}该属性即可.

11、mac显示隐藏文件

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

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

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

13、React-Native中拨打电话

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

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

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

结语： 有新遇到的问题会加进来，有问题欢迎留言提出