react和react-native 都是 facebook开发和维护的前端框架
都是使用jsx语法进行项目的书写
不过今天的主角是 react-native
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class App_01 extends Component {
render() {
return (
<View>
<Text> textInComponent </Text>
</View>
)
}
}
View 类似 web中的 div元素
Text 标签 类似 p 标记
在react-native中 内联样式的书写 和 react中的是一样的
<Text style={{'color':'red',fontSize:20}}> my name is yunchong_zhao </Text>
2, 就是内外边距和web的有点不太一样
<Text
style={{
borderWidth:3,
borderColor:'yellow',
borderStyle:'dashed',
paddingHorizontal:50, //水平方向内边距
paddingVertical:50, // 垂直方向内边距
marginHorizontal:30, // 水平方向 外边距
marginVertical:50 // 垂直方向 外边距
}}>上下边距</Text>
3.react-native中的外部样式引用
import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'
export default class App extends Component {
render() {
return (
<View>
<Text style={ss.blue}> Hello world </Text>
<Text style={ss.red}> Hello world </Text>
<Text style={ss.green}> Hello world </Text>
<Text style={[ss.blue,ss.lg]}> Hello world </Text>
<Text style={ss.red}> Hello world </Text>
{/* 内部样式书写 */}
<Text style={[ss.green,{fontSize:30}]}> Hello world </Text>
</View>
)
}
}
// 默认的常量名字比较长,改成ss 外部样式提前定义好 然后在上面的标签中引用
const ss = StyleSheet.create({
blue:{color:'blue'},
green:{color:'rgb(0,255,0)'},
red:{color:'#f00'},
lg:{fontSize:20},
md:{fontSize:15},
sm:{fontSize:12}
})
4.react-native 中的布局方式 默认是使用 flex 布局 而且默认主轴方向是 竖直方向
对弹性盒子布局不了解的童鞋建议学习下弹性盒子模型
<View style={{backgroundColor:'#aaf',height:200,flexDirection:'row'}}>
{/* flex属性 用来控制子元素在父元素的占有份数 */}
{/* flex属性 用来控制子元素在父元素的占有份数 */}
<Text style={{backgroundColor:'red',flex:1}}> Sunny </Text>
<Text style={{backgroundColor:'yellow',flex:2}}> 我的同桌很漂亮 </Text>
<Text style={{backgroundColor:'orange',flex:1}}> 赵可爱 </Text>
</View>
<View style={ss.box}>
<Text >11111111111 </Text>
<Text > 2222222 </Text>
<Text >33333333 </Text>
<Text }> 444444444 </Text>
</View>
const ss = StyleSheet.create({
box:{
height:600,
backgroundColor:'gray',
// alignItems:'center',
justifyContent:'flex-end',// 主轴方向 尾部对齐
justifyContent:'center',
justifyContent:'space-around', // 元素 之间距离相等 但边上距离不等
// justifyContent:'space-between' // 俩边贴边
justifyContent:'space-evenly' //各个地方留白距离相等
// justifyContent:'end',
alignItems:'center', //居中
alignItems:'flex-end',
alignItems:'flex-start',
alignItems:'stretch' //拉伸充满
}
})
5.react-native 中的事件操作 (点击事件)
doPress=()=>{
alert('点击操作!');
}
doLongPress=()=>{
alert('长按触发的操作!')
}
<View>
<Text
numberOfLines={3} // 文字显示三行
ellipsizeMode="tail" // 末尾显示 三个省略号
onPress={this.doPress} // 点击事件
// 长按触发的操作
onLongPress={this.doLongPress} // 长按事件
>11111111111111111111111111111111111111111</Text>
</View>
6.react-native中的引入图片资源
在react-native中有俩种 图片的引入方式
1.网络地址 2.和本地图片资源
export default class App extends Component {
//网络地址
img="https://wwwww.*****.jpg"; //网络地址
render() {
return (
// react-native中 的 背景图片标签
<ImageBackground source={{uri:'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=248222817,375547763&fm=26&gp=0.jpg'}} style={{width:'100%',height:'100%'}}>
<Text> textInComponent </Text>
{/* 本地图片 */}
<Image resizeMode="cover" style={{width:300,height:300,borderWidth:1,borderColor:'red'}} source={require("./assets/img/1.jpg")} /> // 本地图片资源加载 使用 require
{/* 网络图片加载 对象类型固定写法 uri:this.img
网络图片默认大小是 0 0 看不到的
*/}
<Image source={{uri:this.img}} style={{width:200,height:300}} />
</ImageBackground>
)
}
}
好了 react-native 就先说到这里
生活那么苦,那就笑着去面对,记得给自己吃颗糖!!!