ReactNative（学习部署）{样式使用、图片、文本、布局、按钮、活动提示器、状态栏和背景图、开关和文本输入框}

RN环境部署视频

链接: https://pan.baidu.com/s/1Z5msrmcoLwrcHwQIRVqKKA

提取码: abwu 

RN部署资源

链接: https://pan.baidu.com/s/19eFVsVXoB0viPUK1ZxhmEA

提取码: rphi 

ReactNative学习

项目包目录结构

 在RN代码编写过程中，开发者服务器是热更新服务器，代码写完之后会立即同步到模拟器。代码没写完，就同步过去了，会造成模拟器里APP崩溃。不要使用vscode里的自动保存。

组件

RN提供了一套组件进行开发使用，它是官方维护的，兼容性更好一些。

官方组件文档：核心组件和API · React Native 中文网

样式使用

// rnc 快捷代码 react native component
import React, {Component} from 'react';
import {Text, View, StyleSheet} from 'react-native';
// 组件必须是RN提供的,否则手机端APP无法编译通过
// div span不能用了

export default class App extends Component {
  render() {
    return (
      <View>
        {/* style属性 设置样式 样式格式为对象格式 大小的单位本身就是物理像素 不需要写单位 */}
        <Text style={{color: 'red', fontSize: 30}}>
          这是ReactNative学习的第一行文字
        </Text>
        {/* 样式抽离 使用StyleSheet对象 */}
        {/* 注意: 文本必须写到Text组件中 */}
        <Text style={ss.danger}>Danger</Text>
        {/* 组合写法 {[{},{}]}*/}
        <Text style={[ss.success,{marginTop:10}]}>成功</Text>
        {/* 练习: 写一个文本块 文字和色块  颜色为蓝色  字体为白色*/}
        {/* 撑一个空容器 没有内容 具有高度 实现间隔 */}
        <View style={{height:20}}></View>
        <Text style={ss.info}>我是蓝色背景,白色的字</Text>
      </View>
    );
  }
}
// 通过StyleSheet把样式抽离出来
const ss = StyleSheet.create({
  info:{
    backgroundColor:'blue',
    color:'white',
    fontSize:28,
    borderRadius:20,
    padding:10
  },
  danger: {
    backgroundColor: 'red',
    color: 'white',
    padding: 5,
    fontSize: 22,
    borderRadius: 6,
  },
  success: {
    backgroundColor: 'green',
    color: 'white',
    padding: 5,
    fontSize: 22,
    borderRadius: 6,
  },
});

图片

// rnc
/***
 * 图片使用
 * 远程图片使用
 * 本地图片使用
 *
 */
import React, {Component} from 'react';
// 1.引入图片组件
import {Text, View, Image} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View>
        {/* Image组件必须提前引入 才可以使用 */}
        {/* 远程图片引入 默认宽高为0 不显示 必须设置宽高 否则不显示 */}
        <View style={{height: 50}}></View>
        <Image
          source={{
            uri: 'https://img0.baidu.com/it/u=700256878,601464201&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=316',
          }}
          style={{height: 300}}
          blurRadius={6}
        />
        {/* 本地图片引入  使用require */}
        {/* blurRadius 模糊属性 */}
        <Image source={require('./assets/1.png')} blurRadius={6} />
      </View>
    );
  }
}

Text文本

// rnc
/**
 * Text文本组件
 * RN 文本内容需要包裹在Text组件中
 *
 */
import React, {Component} from 'react';
import {Text, View} from 'react-native';

export default class App extends Component {
  render() {
    return (
      // View组件 唯一的根组件
      // View中没有style的一些属性 fontSize color
      <View>
        <Text style={{fontSize: 25}}>text组件1</Text>
        <Text style={{fontSize: 25}}>text组件</Text>
        {/* Text组件作为容器 下级的文本可以继承样式 */}
        <Text style={{fontSize: 25}}>
          <Text>text组件1</Text>
          <Text>text组件</Text>
        </Text>
        {/* 文字折行隐藏 ...  */}
        <Text style={{fontSize:25,fontWeight:"800",color:'#009933'}} numberOfLines={3}>
          今天天气还不错,反正太阳挺大的。今天天气还不错,反正太阳挺大的今天天气还不错,反正太阳挺大的今天天气还不错,反正太阳挺大的今天天气还不错,反正太阳挺大的今天天气还不错,反正太阳挺大的今天天气还不错,反正太阳挺大的今天天气还不错,反正太阳挺大的今天天气还不错,反正太阳挺大的今天天气还不错,反正太阳挺大的今天天气还不错,反正太阳挺大的今天天气还不错,反正太阳挺大的今天天气还不错,反正太阳挺大的今天天气还不错,反正太阳挺大的今天天气还不错,反正太阳挺大的今天天气还不错,反正太阳挺大的
        </Text>
      </View>
    );
  }
}

rpx

// rnc
/***
 * 移动端中为了能够使文字显示和图片大小显示适应不同屏幕大小的设备。尺寸的大小会使用相对单位。
 * 微信小程序中 rpx 把屏幕宽度分为750份,1rpx代表1份屏幕大小
 * 需要计算出物理像素到rpx的方式
 *
 */
import React, {Component} from 'react';
import {Text, View, Dimensions} from 'react-native';

// 获取屏幕的宽度
const {width, height} = Dimensions.get('window');
// rpx换算成物理像素  rpx(35)
const rpx = x => (width / 750) * x;
export default class App extends Component {
  render() {
    return (
      <View>
        <Text style={{fontSize:rpx(50)}}> textInComponent </Text>
      </View>
    );
  }
}

布局

View根组件，View组件的默认布局就是flex，主轴竖向排列，横向拉伸

相关属性：

flexDirection 主轴排列方式

justfyContent 主轴对齐方式

alignItems 对称轴对齐方式 效果

// rnc
import React, {Component} from 'react';
import {Text, View, StyleSheet} from 'react-native';
/***
 * ReactNative 默认布局方式就是flex 弹性布局
 *
 *
 */
export default class App extends Component {
  render() {
    return (
      // 默认View中布局方式 flex
      // 竖向排列 横向拉伸
      <View style={ss.body}>
        <Text style={ss.red}>1.Red</Text>
        <Text style={ss.green}>2.Green</Text>
        <Text style={ss.blue}>3.Blue</Text>
      </View>
    );
  }
}
const base = {fontSize: 25, color: 'white', padding: 30};
const ss = StyleSheet.create({
  body:{
    // 布局排列方式
    flexDirection:'row', //横向
    flexDirection:'column-reverse', // 竖向逆向
    flexDirection:'row-reverse', //横向逆向
    flexDirection:'column', //默认值 垂直 竖向

    // 对齐方式 主轴方向
    justifyContent:'flex-start', //默认值 首部对齐
    justifyContent:'center', // 居中对齐
    justifyContent:'flex-end', //尾部对齐
    justifyContent:'space-around', //空白环绕
    justifyContent:'space-evenly', //空白均分
    justifyContent:'space-between', //中间留白

    // 交叉轴  与主轴方向 相对 flexDirection 
    alignItems:'stretch', //默认值 拉伸
    alignItems:'flex-start', // 起始对齐
    alignItems:'flex-end', // 尾部对齐
    alignItems:'center', // 居中对齐

    // 添加一个高度和背景色 识别
    height:400,
    backgroundColor:'pink'
  },
  // 把相同的公共的样式,可以抽离,通过es6 对象合并语法 整合到一起
  red: {
    ...base,
    backgroundColor: 'red',
  },
  green: {
    ...base,
    backgroundColor: 'green',
  },
  blue: {
    ...base,
    backgroundColor: 'blue',
  },
});

按钮

// rnc
/***
 * 实现按钮的方式:
 * 方式一: button组件
 * 方式二: touchableOpacity 容器 写样式
 *
 * 练习:
 * 要求通过touchableOpacity 实现一个按钮
 * 按钮颜色为天蓝色
 * 按钮的内容  '退出'  字体颜色为白色  字体大小30
 *
 *
 * 点击按钮之后出发点击事件 显示alert 退出成功
 *
 */
import React, {Component} from 'react';
import {Text, View, Button, TouchableOpacity} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}} s>
        <Button title="登录"></Button>
        {/* touchableOpacity 实现按钮*/}
        {/* activeOpacity 点中透明度 */}
        <TouchableOpacity
          activeOpacity={0.7}
          style={{
            marginTop: 100,
            backgroundColor: 'orange',
            paddingHorizontal: 100, //横向填充 左右
            paddingVertical: 10, //垂直方向
            borderRadius: 6,
          }}>
          <Text style={{color: 'white', fontSize: 20, letterSpacing: 10}}>
            登录
          </Text>
        </TouchableOpacity>

        {/* 练习按钮 */}
        <TouchableOpacity
          activeOpacity={0.7}
          style={{
            marginTop: 100,
            backgroundColor: '#0686f1',
            paddingHorizontal: 100,
            paddingVertical: 10,
          }}
          // 在手机端APP RN中点击事件 onPress
          onPress={() => alert('退出成功')}>
          <Text style={{fontSize: 30, color: 'white'}}>退出</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

活动提示器

显示一个圆形的 loading 提示符号。

// rnc
/**
 * 活动提示器 ActivityIndicator
 * 显示一个圆形的 loading 提示符号。
 * 
 * 
 */
import React, { Component } from 'react'
import { Text, View,ActivityIndicator } from 'react-native'

export default class App extends Component {
  render() {
    return (
      <View>
        <ActivityIndicator size="large" color="red"></ActivityIndicator>
        <View style={{height:100}}></View>
        {/* 自定义写一个加载组件 */}
        <View style={{alignItems:"center",backgroundColor:"#eeeeee"}}>
          <ActivityIndicator color="red" size={38}></ActivityIndicator>
          <Text style={{fontSize:28}}>加载中...</Text>
        </View>
      </View>
    )
  }
}

状态栏和背景图

// rnc
/***
 * 状态栏 Statusbar
 * 背景图 ImageBackground
 *
 * 背景图需要覆盖整个屏幕 需要动态的获取屏幕大小
 *  Dimensions
 */
import React, {Component} from 'react';
import {Text, View, StatusBar, ImageBackground, Dimensions} from 'react-native';

// 获取宽高
const {width, height} = Dimensions.get('window');
export default class App extends Component {
  render() {
    return (
        // 背景图必须给宽高 背景图组件需要把所有内容包裹
        <ImageBackground source={require('./assets/bg.jpg')} style={{width,height}}>
          {/* 在背景图中,为了能够让整体效果更好一些 可以自定义状态栏 */}
          {/* transparent 透明的 和rgba(0,0,0,0) */}
          {/* translucent 可穿透的 */}
          <StatusBar backgroundColor="transparent" translucent/>
          {/* 沉浸式状态栏 会出现内容覆盖写在状态栏 */}
          {/* 获取状态栏的高度 把高度撑出来 */}
          {/* <View style={{height:StatusBar.currentHeight}}></View> */}
          {/* 编写一些文本信息 */}
          <Text style={{color:'white',fontSize:30,marginTop:StatusBar.currentHeight}}>这是一个背景图和沉浸式状态栏的案例</Text>
        </ImageBackground>
    );
  }
}

关于语法报错和App奔溃：

①看语法报错的信息，确认是否为语法错误

②尝试最简单的代码 通过vscode插件的快捷提示rnc，检查是否可以运行成功，如果可以运行成功，就说明是文件代码错误了

③确认代码没有问题，还是报错或app无法启动

• 把项目包重新解压一份使用

• app-debug.apk文件重新安装到模拟器

• 将项目包的开发服务和模拟器里的app-debug进行重新配置关联

重启电脑试试看，可能由于电脑系统资源不足导致无法运行。重启实际回收资源了。

开关和文本输入框

// rnc
/****
 * 受控组件  它是具有状态的 进行双向绑定
 * Switch  开关 两种状态  true  false
 * TextInput 文本输入框
 */
import React, {Component} from 'react';
import {Text, View, Switch, TextInput, StyleSheet} from 'react-native';

export default class App extends Component {
  // status Switch的状态 false默认为关
  state = {status: false, uname: '', upwd: ''};
  render() {
    // 为了方便后续使用state属性 会提前es6解构
    const {status, uname, upwd} = this.state;
    return (
      <View>
        {/* 开关 */}
        <Switch
          value={status}
          // open 当开关切换后 传入的状态 true false
          onValueChange={status => this.setState({status})}></Switch>
        {/* 文本输入框  */}
        <View
          style={ss.inputView}>
          <Text style={{fontSize: 25}}>账号:</Text>
          <TextInput
            style={ss.input}
            value={uname}
            onChangeText={uname => this.setState({uname})}
            placeholder="请输入账号"></TextInput>
        </View>
        <View style={{height:50}}></View>
        {/* 密码框 */}
        <View
          style={ss.inputView}>
          <Text style={{fontSize: 25}}>密码:</Text>
          {/* secureTextEntry 密码显示状态 true密文 false为明文 */}
          <TextInput
            secureTextEntry={!status}
            style={ss.input}
            value={upwd}
            onChangeText={upwd => this.setState({upwd})}
            placeholder="请输入密码"></TextInput>
        </View>
      </View>
    );
  }
}
const ss = StyleSheet.create({
  inputView:{
    flexDirection: 'row',
    borderWidth: 1,
    width: 400,
    marginLeft: 30,
  },
  input: {
    fontSize: 25,
    color: '#333',
    borderWidth: 1,
    padding: 5,
    borderRadius: 6,
    // 占整个1份
    flex: 1,
    alignSelf: 'center',
  },
});