ReactNative常用技巧

最近在做项目，趁机总结一下用到的知识点(欢迎大家补充)

导航栏背景颜色

安卓 

<StatusBar
    barStyle="light-content"
    backgroundColor="#000000"
/>

ios 不支持背景色设置

插件 react-native-statusbar-props

import StatusBarProps from 'react-native-statusbar-props';

<View
    style={{backgroundColor:"#000000",height:system=='ios'?StatusBarProps.height:0}}
></View>

轮播图

控制高度需要在外边套一个view
{/*轮播图*/}
<View style={{height:Utils.autoWidth(170),marginTop:Utils.autoWidth(22),marginBottom:Utils.autoWidth(22)}}>
    <Swiper
        loop={true}
        autoplay={true}
        onIndexChanged={this._onIndexChanged}
    >
        <View style={styles.slide1}>
            <Text style={styles.text}>Hello Swiper</Text>
        </View>
        <View style={styles.slide2}>
            <Text style={styles.text}>Beautiful</Text>
        </View>
        <View style={styles.slide3}>
            <Text style={styles.text}>And simple</Text>
        </View>
    </Swiper>
</View>

常用列表布局

style={{flexDirection:"row",flexWrap:"wrap",justifyContent:"space-between"}}

自定义tab导航栏

插件 react-navigation

import React, {Component} from "react";
import {
    View,
    Text,
    Image,
    TouchableWithoutFeedback,
    StyleSheet
} from "react-native";
import {createMaterialTopTabNavigator} from 'react-navigation';
import Carload from "./Carload";
import Device from "./Device";
import Tool from "./Tool";
import StatusBarProps from "react-native-statusbar-props";
import Utils from "../Utils";

const styles = StyleSheet.create({
    tabstyle: {
        width: Utils.autoWidth(90),
        height: Utils.autoWidth(29),
        justifyContent: "center",
        alignItems: "center",
    },
    checkedtab: {
        width: Utils.autoWidth(90),
        height: Utils.autoWidth(29),
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#e4e1e1"
    },
    tabtext: {
        fontSize: Utils.setSpText(17),
        color: "#666666"
    },
    checkedtext: {
        fontSize: Utils.setSpText(17),
        color: "#333333"
    }
})

class TabBarComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checkvalue: 0
        };
    }

    setCheckValue = (val) => {
        this.setState({
            checkvalue: val
        })
        if(val==0){
            this.props.navigation.navigate("Carload");
        }else if(val==1){
            this.props.navigation.navigate("Device")
        }else if(val==2){
            this.props.navigation.navigate("Tool")
        }

    }

    render() {
        return (
            <View>
                {/*导航条背景色*/}
                <View
                    style={{backgroundColor: "#000000", height: StatusBarProps.height}}
                ></View>
                {/*选项卡标题*/}
                <View
                    style={{
                        backgroundColor: "#000000",
                        height: Utils.autoWidth(44),
                        alignItems: "center",
                        flexDirection: "row",
                        paddingLeft: Utils.autoWidth(10),
                        paddingRight: Utils.autoWidth(10)
                    }}
                >
                    <Image
                        source={require("../../images/icon_list.png")}
                        style={{width: Utils.autoWidth(20), height: Utils.autoWidth(16)}}
                    ></Image>
                    <View
                        style={{flex: 1, alignItems: "center"}}
                    >
                        <View
                            style={{
                                width: Utils.autoWidth(270),
                                height: Utils.autoWidth(29),
                                borderRadius: Utils.autoWidth(14),
                                overflow: "hidden",
                                backgroundColor: "#ffffff",
                                flexDirection: "row"
                            }}
                        >
                            <TouchableWithoutFeedback
                                onPress={() => this.setCheckValue(0)}
                            >
                                <View
                                    style={this.state.checkvalue == 0 ? styles.tabstyle : styles.checkedtab}
                                >
                                    <Text
                                        style={this.state.checkvalue == 0 ? styles.tabtext : styles.checkedtext}
                                    >整车</Text>
                                </View>
                            </TouchableWithoutFeedback>
                            <TouchableWithoutFeedback
                                onPress={() => this.setCheckValue(1)}
                            >
                                <View
                                    style={this.state.checkvalue == 1 ? styles.tabstyle : styles.checkedtab}
                                >
                                    <Text
                                        style={this.state.checkvalue == 0 ? styles.tabtext : styles.checkedtext}
                                    >设备</Text>
                                </View>
                            </TouchableWithoutFeedback>
                            <TouchableWithoutFeedback
                                onPress={() => this.setCheckValue(2)}
                            >
                                <View
                                    style={this.state.checkvalue == 2 ? styles.tabstyle : styles.checkedtab}
                                >
                                    <Text
                                        style={this.state.checkvalue == 0 ? styles.tabtext : styles.checkedtext}
                                    >工具</Text>
                                </View>
                            </TouchableWithoutFeedback>

                        </View>
                    </View>
                    <Image
                        source={require("../../images/icon_search_white.png")}
                        style={{width: Utils.autoWidth(20), height: Utils.autoWidth(20)}}
                    ></Image>
                </View>
            </View>
        )

    }

};
const Share = createMaterialTopTabNavigator({
        Carload: {screen: Carload},
        Device: {screen: Device},
        Tool: {screen: Tool}
    },
    {
        tabBarComponent: props =>
            <TabBarComponent
                {...props}
            />,
        swipeEnabled:false
    },
);
export default Share;

背景渐变色

建议直接用图片

插件 react-native-linear-gradient

安卓文本垂直居中

<View
    style={{height:50,alignItems:'center',justifyContent:'center'}}
>
    <Text>测试</Text>
</View>

includeFontPadding bool

Android在默认情况下会为文字额外保留一些padding，以便留出空间摆放上标或是下标的文字。对于某些字体来说，这些额外的padding可能会导致文字难以垂直居中。如果你把textAlignVertical设置为center之后，文字看起来依然不在正中间，那么可以尝试将本属性设置为false.

文本去除背景色

backgroundColor:'rgba(0,0,0,)'

字体大小随系统字体大小来缩放

allowFontScaling bool 

控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。

react-native-qrcode-scanner

扫一扫 安卓 Requires VIBRATE permission

缺少震动权限

<uses-permission android:name="android.permission.VIBRATE"></uses-permission>

iTunes 12.6.3 下载地址：
Mac http://t.cn/RO5rIfE 
Win 32 http://t.cn/ROtta1T 
Win64 http://t.cn/ROtta1n 

提示：无法读取文件“iTunes Library.itl”
安装好后，打开finder，搜索iTunes library.itl文件全部删除 

iOS开发技巧之：如何用Xcode导出ipa包

https://blog.csdn.net/vkooy/article/details/65442567

ios 支持http协议

最终找到以下解决办法：

在Info.plist中添加NSAppTransportSecurity类型Dictionary。

在NSAppTransportSecurity下添加NSAllowsArbitraryLoads类型Boolean,值设为YES

步骤截图：

1.找到Info.plist，选择Info.plist进行编辑

 

2.查看Info.plist里面真实的key

 

3.添加NSAppTransportSecurity的字典

 

4.再为NSAppTransportSecurity字典里添加一个NSAllowsArbitraryLoads的key，并把Boolean设置为YES