react-native 入门教程

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 就先说到这里
生活那么苦,那就笑着去面对,记得给自己吃颗糖！！！