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(