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'

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

秒客网