最近在做项目,趁机总结一下用到的知识点(欢迎大家补充)
导航栏背景颜色
安卓
<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