本人是RN小白一枚，这段时间在B站学习Android前端
学习视频连接
**
Visual Studio Code
**
真机模式（HUAWEI nova5Pro）：
1、手机连接电脑
2、将充电模式传输文件
3、打开开发者选项
4、打开USB调试
5、在设置中选择应用将新生成项目的app的悬浮窗打开
项目启动 :
npm start //项目启动
adb reverse tcp:8081 tcp:8081 //
npx react-native log-android //查看日志
**
Android Studio
**
项目启动 :
react-native run-android //android
react-native run-ios //ios
各部分组成
关闭所以黄色警告的代码
console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please use BackHandler instead.','source.uri should not be an empty string','Invalid props.style key'];
console.disableYellowBox = true // 关闭全部黄色警告
适配机型问题
import React, { Component } from 'react'
import {View, StyleSheet,Dimensions, Image, Text, FlatList} from 'react-native'
const {width,scale} = Dimensions.get('window')
const wuli = width * scale/1080
... ...
const styles = StyleSheet.create({
box:{
width: wuli*340,
height: wuli*200
},
})
获取屏幕高及屏幕像素比
// width宽度逻辑像素
// height高度逻辑像素 对于不同像素的屏幕，屏幕逻辑像素不一样
// scale缩放比
const {width, height, scale} = Dimensions.get("window")
export default class App1 extends Component {
render() {
return (
<View style={styles.box1}>
<Text>屏幕宽度是：{width}，屏幕高度是：{height}</Text>
<Text>屏幕缩放比是：{scale}</Text>
{/* 对于不同像素的屏幕(即不同型号手机)，屏幕逻辑像素不一样，即宽度不一定都是360*/}
{/* 缩放比对不同的手机也可能不一样，不是固定值 */}
</View>
)
}
}
Flex布局
1、display属性
display 设置此组件的显示类型。它的值只支持'flex'和'none'。'flex'是默认值。
2、flex属性
在React Native 中，flex的值是一个正数，它的大小将与其弹性值成比例。
3、flexDirection属性
flexDirection控制主轴的方向
flexDirection的4个值：'row'，'row-reverse'，'column'，'column-reverse'
'row' 设置主轴为水平正向 123
'row-reverse' 设置主轴为水平反向 321
'column' 设置主轴为垂直正向 123
'column-reverse' 设置主轴为垂直反向 321
4、justifyContent属性
justifyContent控制主轴的对齐方式
justifyContent的5个值：'flex-start'，'flex-end'，'center'，'space-between'，'space-around'
'flex-start': 左(或顶)对齐 默认值
'flex-end' 右(或底)对齐
'center' 居中对齐
'space-between' 中间留白
'space-around' 中间及两侧留白
5、alignItems属性
alignItems属性控制侧轴对其方式
alignItems属性的5个值： 'flex-start'，'flex-end'，'center'，'stretch'，'baseline'
'flex-start': 左(或顶)对齐 默认值
'flex-end' 右(或底)对齐
'center' 居中对齐
'stretch' 设置侧轴拉伸，此时侧轴方向(宽或者高)不要给固定数值，才能看得见拉伸效果
'baseline' 设置基线对齐，文字底部对齐
按钮组件：
Button 组件的几个重要属性：
title 按钮上的展示文字
color 按钮的背景颜色（安卓），或者文本颜色（IOS）
onPress 按压事件(即点击事件)
因为Button样式本身有局限性。TouchableOpacity组件可以自由定义组件样式。
图片引入方式：
<Image source={require('./my-icon.png')} /> //静态图片
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} /> //混合App图片资源
<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} /> //放置在Android的目录中的图片
//从网络引入图片
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} /> // √
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} /> // ×
//背景图片ImageBackground
return (
<ImageBackground style={{height:100,width:300}} source={require('../images/vip_account.png')}>
<Text>Inside</Text>
</ImageBackground>
);
TextInput 属性
<TextInput style={styles.txtInput}
placeholder="请输入：" // 占位符设置(提示文本)
placeholderTextColor="#bbb" // 占位符颜色设置
maxLength={8} //可以输入的最大长度
underlineColorAndroid="transparent" //底线透明
// secureTextEntry = {true} //安卓下的密码设置
/>
ScrollView
<ScrollView style={styles.box}
horizontal={true} //水平排列
pagingEnabled={true} //滚动条倍数滚动
showsHorizontalScrollIndicator={false} //不显示横向滚动条（用小圆点代替）
>
{/* 多屏展示 */}
<View><Text>第1屏</Text></View>
<View><Text>第2屏</Text></View>
</ScrollView>
属性图片展示
import React, { Component } from 'react'
import { View, StyleSheet,Image, FlatList, Text } from 'react-native'
const img_data=[
{
name:"p01",
des:"Puma Defy 赛琳娜限定"
},
{
name:"p02",
des:"圣罗兰 口红礼盒"
},
{
name:"p03",
des:"大豆家 方头奶奶鞋"
},
{
name:"p04",
des:"小狗图案不锈钢皂"
},
{
name:"p05",
des:"YSL限量眼影银盘"
},
{
name:"p06",
des:"可折叠加厚双面使用榻榻米床垫"
}
]
export default class App2 extends Component {
constructor(props){
super(props)
this.state = {
img_data
}
}
renderData({item}){ // item 就是数组数据中的每一项对象
return(
<View>
<Image source={{uri:item.name}} style={styles.imgContent}/>
<Text style={styles.txtContent}>{item.des}</Text>
</View>
)
}
render() {
return (
<View style={styles.container}>
<Image source={require("../../res/tit_50x16.png")} style={styles.imgTitle}/> //有好货标签图片
//FlatList组件的使用
<FlatList
numColumns={3} //每行显示个数
data={ this.state.img_data } //数据源
renderItem = { this.renderData } //渲染函数
/>
</View>
)
}
}
const styles = StyleSheet.create({
container:{ //大盒子
flex:1,
backgroundColor:"#ccc",
paddingLeft:10,
paddingRight:10,
},
imgTitle:{ //标签图片
width:50,
height:16,
marginTop:10,
marginBottom:10
},
imgContent:{ //图片内容
width:100,
height:100,
marginRight:20
},
txtContent:{ //图片文字内容
width:118,
height:18,
marginBottom:10
}
})
登录界面展示
//4、登录界面
import React, { Component } from 'react'
import { View, StyleSheet, Dimensions, Image,TextInput, TouchableOpacity, Text } from 'react-native'
const {scale,height} = Dimensions.get('window') //获取屏幕的属性
export default class App4 extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.wrap}>
{/* 头像 */}
<Image source={require("../../res/avatar.jpg")} style={styles.avatar}/>
{/* 用户名 */}
<TextInput style={[styles.username,styles.txt]}
placeholder="请输入用户名" // 占位符设置(提示文本)
placeholderTextColor="#ccc" // 占位符颜色设置
/>
{/* 密码 */}
<TextInput style={styles.txt}
placeholder="请输入密码" // 占位符设置(提示文本)
placeholderTextColor="#ccc" // 占位符颜色设置
maxLength={10} //可以输入的最大长度
underlineColorAndroid='transparent' // 底线设置透明
secureTextEntry = {true} //安卓下的密码设置
/>
{/* 登录按钮 */}
<TouchableOpacity style={styles.loginBtn} activeOpacity={0.7}>
<Text style={styles.loginText}>
登录
</Text>
</TouchableOpacity>
{/* 忘记密码&&注册新用户 */}
<View style={styles.newUser}>
<TouchableOpacity activeOpacity={0.8}> //TouchableOpacity设为点击事件
<Text style={{fontSize:12}}> //activeOpacity为点击动作展示0-1，1无动作
忘记密码
</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8}>
<Text style={{fontSize:12}}>
注册新用户
</Text>
</TouchableOpacity>
</View>
{/* 其他方式登录 */}
<View style={styles.others}>
<View style={styles.line}></View>
<View style={styles.othersTitle}>
<Text style={{fontSize:12}}>其他方式登录</Text>
</View>
<View style={styles.icons}>
<TouchableOpacity activeOpacity={0.6}>
<Image source={require("../../res/icon1.png")} style={styles.icon}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.6}>
<Image source={require("../../res/icon2.png")} style={[styles.icon,styles.icon]}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.6}>
<Image source={require("../../res/icon3.png")} style={styles.icon}/>
</TouchableOpacity>
</View>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container:{ //最大的盒子
flex:1,
backgroundColor:"#eee",
alignItems:"center"
},
wrap:{
width:320,
height,
backgroundColor:"#eee",
alignItems:"center"
},
avatar:{
width:60,
height:60,
borderRadius:30,
borderWidth:1,
borderColor:"#fff",
marginTop:60,
marginBottom:30
},
txt:{
width:"100%",
height:40,
backgroundColor:"#fff",
paddingLeft:10,
},
username:{
marginBottom:3
},
loginBtn:{
width:"100%",
height:40,
alignItems:"center",
backgroundColor:"skyblue",
borderRadius:4,
marginTop:20
},
loginText:{
lineHeight:40,
color:"#fff"
},
newUser:{
flexDirection:"row", //主轴方向改为横向
justifyContent:"space-between", //主轴的对齐方式
width:"100%", //文字所在的盒子的宽度
marginTop:10
},
others:{
width:"100%",
position:"absolute", //定位
bottom:40,
alignItems:"center"
},
line:{
width:"100%",
height:1/scale,
backgroundColor:"#999"
},
othersTitle:{
marginTop:-8,
backgroundColor:"#eee",
paddingLeft:10,
paddingRight:10,
},
icons:{
flexDirection:"row",
marginTop:10
},
icon:{
width:30,
height:30,
borderRadius:15,
marginRight:10,
marginLeft:10
},
iconSnd:{
marginLeft:15,
marginRight:15,
}
})