React Native 官网

如果react基础有些遗忘,可以打开React官网查看

介绍

React Native 是一个使用React和应用平台的原生功能来构建 Android 和 iOS 应用的开源框架。通过 React Native,您可以使用 JavaScript 来访问移动平台的 API,以及使用 React 组件来描述 UI 的外观和行为:一系列可重用、可嵌套的代码。

ReactNative环境搭建相比较繁琐 按照React Native 官网进行安装,就可以了,如果失败可以多试几次,也可以在下方留言,在这里就不再多说了

初始化项目

npx react-native init myApp

安装投影工具

scrcpy地址

使用方法:

  • 下载 scrcpy
  • 手机通过usb连接电脑
  • 双击打开工具即可

React Native基础

文件目录结构

│  App.js           ---   项目的根组件
│  index.js         ---   项目的入口文件
│  package.json     ---   项目的描述文件
│  .eslintrc.js     ---   eslint的配置文件
│  .prettierrc.js   ---   格式化配置文件
│  android          ---   编译安卓相关
│  ios              ---   编译ios相关

jsx

jsx(全称是 JavaScript xml)格式同学们都比较熟悉了,但是为了新来的同学再写一遍

import React from 'react';
import { View, Text } from 'react-native';const Index = () => <View><Text>JSX</Text>
</View>export default Index;

RN样式与web样式不同之处

flex布局

  • React Native 中使用 flexbox 规则来指定某个组件的子元素的布局,使其可以在不同屏幕尺寸提供一致的布局

  • flexDirection的默认值是column而不是row,而flex也只能指定一个数字值。

  • flex值越大所占的比例越大

样式继承

背景颜色、字体颜色、字体大小等没有继承,需要单独设置

单位

React Native 中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。

  • 不能加 px 单位
  • 不能加 vw vh 等单位
  • 可以加百分比单位

屏幕宽度与高度

import {Dimensions } from "react-native";
const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);

标签

View

  • 相当于以前web中的div
  • 不支持设置字体大小,字体颜色等
  • 不能直接放文本内容
  • 不支持直接绑定点击事件 (一般使用 TouchableOpacity 来代替)

Text

文本标签

  • 文本标签 可以设置字体颜色、大小等
  • 支持绑定点击事件

TouchableOpacity

可以绑定点击事件的块级标签

  • 相当于块级的容器
  • 支持绑定点击事件 onPress
  • 可以设置点击时的透明度
<TouchableOpacity  activeOpacity={0.5}  onPress={this.handleOnPress} >
</TouchableOpacity>

Image

图片标签 引入图片的方式

  • 渲染本地图片时

    <Image source={require("../girl.png")}  />
    
  • 渲染网络图片时,必须加入宽度和高度

    <Image source={{uri:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590514654506&di=38fa919d4c78fb776536b922bb94eec3&imgtype=0&src=http%3A%2F%2Fimages.ali213.net%2Fpicfile%2Fpic%2F2013%2F03%2F28%2F927_xgzwl%2520%25281%2529.jpg"}} style={{width:200,height:300}}  />
    
  • 在 Android 上支持 GIF 和 WebP 格式图片

    默认情况下 Android 是不支持 GIF 和 WebP 格式的。你需要在android/app/build.gradle文件中根据需要手动添加以下模块:

    dependencies {// 如果你需要支持Android4.0(API level 14)之前的版本implementation 'com.facebook.fresco:animated-base-support:1.3.0'// 如果你需要支持GIF动图implementation 'com.facebook.fresco:animated-gif:2.0.0'// 如果你需要支持WebP格式,包括WebP动图implementation 'com.facebook.fresco:animated-webp:2.1.0'implementation 'com.facebook.fresco:webpsupport:2.0.0'// 如果只需要支持WebP格式而不需要动图implementation 'com.facebook.fresco:webpsupport:2.0.0'
    }

之后 重启项目

ImageBackground

一个可以使用图片当作背景的容器,相当于以前的 div+背景图片 引入图片

  <ImageBackground source={...} style={{width: '100%', height: '100%'}}><Text>Inside</Text></ImageBackground>

TextInput

输入框组件

  • 可以通过 onChangeText事件来获取输入框的值
 <TextInputstyle={{ height: 40, borderColor: 'gray', borderWidth: 1 }}onChangeText={text => onChangeText(text)}value={value}/>

语法

插值表达式

import React from 'react'
import {View,Text} from 'react-native'
const Index = ()=> <View>
<Text>{'你好'}</Text>
<Text>{55555}</Text>
</View>export default Index

组件

  • 类组件

    • 适合复杂的场景
    • 有state
    • 有生命周期

函数组件

  • 函数组件

    • 没有state (通过hooks可以有) useState 类似 const [value,change] = useState(‘124’)
    • 没有生命周期(通过hooks可以有)
    • 适合简单的场景

mobox

mobox 相对于redux更简单易用,更适合react-Native的开发

简单,可扩展的状态管理

mobox使用方法和其他的状态管理工具类似

  1. 安装依赖
  • mobx 核心库
  • mobx-react 方便在react中使用mobx技术的库
  • @babel/plugin-proposal-decoratorsrn 项目支持 es7 的装饰器语法的库
yarn add mobx mobx-react @babel/plugin-proposal-decorators
  1. babel.config.js添加以下配置
  plugins: [['@babel/plugin-proposal-decorators', { 'legacy': true }]]
  1. 新建文件 mobx\index.js 用来存放 全局数据
import { observable, action } from "mobx";class RootStore {// observable 表示数据可监控 表示是全局数据@observable name = "hello";// action行为 表示 changeName是个可以修改全局共享数据的方法@action changeName(name) {this.name = name;}
}export default new RootStore();
  1. 在根组件挂载
    需通过Provider来挂载和传递
import React, { Component } from 'react';
import { View} from 'react-native';
import rootStore from "./mobx";
import { Provider} from "mobx-react";
class Index extends Component {// 正常render() {return (<View  ><Provider rootStore={rootStore} ><Sub1></Sub1></Provider></View>);}
}
  1. 在其他组件内使用
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import {inject,observer } from "mobx-react";@inject("rootStore") // 注入 用来获取 全局数据的
@observer //  当全局发生改变了  组件的重新渲染 从而显示最新的数据
class Sub1 extends Component {changeName = () => {// 修改全局数据    this.props.rootStore.changeName(Date.now());}render() {console.log(this);
### return (<View><Text onPress={this.changeName}>{this.props.rootStore.name}</Text></View>);}
}export default Index;

一文学会React Native(保姆级教程) 持续更新相关推荐

  1. vue通用后台管理系统(保姆级)--持续更新中

    配合目录使用更加友好哦,文章中分享的项目搭建是完全从0-1搭建,完全适用于小白,可用于vue练手项目,目前还在持续更新中,本篇文章不会断更,因工作原因,只能晚上给大家更新,感觉还行的可以给个关注或者收 ...

  2. 公众号推文制作及发布保姆级教程

    在这个新媒体的时代,无论是我们刚步入大学,加入了部门,做一些宣传方面的工作,还是想在微信公众号平台发布一些自己的日常生活,写一些文章,甚至以后从事一些关于新媒体的工作--推文这个玩意儿确实越来越吃香了 ...

  3. CSS保姆级别教程(持续更新)

    目录 前言 1.选择器 1.1.1 标签选择器 1.1.2 类选择器 1.1.3 id选择器 1.1.4选择器的优先级 2.背景样式 3文本属性 3.1line-height的使用 3.2text-d ...

  4. SpringBoot 配置 generator代码生成+knife4j接口文档(2种模板设置、逻辑删除、字段填充 含代码粘贴可用)保姆级教程(注意事项+建表SQL+代码生成类封装+测试类)

    保姆级教程,逻辑删除及字段自动填充设置,特别要说明的是本次用的是MySQL数据库,如果使用Oracle数据库是,数据库配置需要改变,数据库表一定要大写,否则无法生成代码. 数据库表 CREATE TA ...

  5. 多图预警 保姆级教程带你学会如何重设PCB外框、边框线

    大家在望友软件使用过程中有时会遇到数据读入后显示的PCB外框.边框线不对的情况,会觉得一筹莫展不知所措. 其实解决方法很简单,今天就以图文模式带大家梳理一遍操作流程,保证你看完就学会怎么处理.Let' ...

  6. FastText词向量训练、使用及可视化操作【保姆级教程(包含藏文处理方法)】

    目录 一.前言 二.FastText词向量训练 2.1 数据输入格式 2.2词向量训练 三.词向量使用 一.前言 本文是word2vec词向量篇的姊妹篇.fasttext是静态词向量构建方法的一种,本 ...

  7. Word2Vec词向量训练、使用及可视化操作【保姆级教程(包含藏文处理方法)】

    目录 一.前言 二.Word2Vec词向量训练 2.1 数据输入格式 2.2词向量训练 三.词向量使用 四.词向量可视化 一.前言 word2vec是静态词向量构建方法的一种,本文将介绍word2ve ...

  8. 从购买服务器到网站搭建成功保姆级教程~超详细

    ??从购买服务器到网站搭建成功保姆级教程~真的超详细,各位看官细品 ??前言 ??预备知识 ??什么是云服务器? ??什么是域名? ??什么是SSL证书? ??服务器选配 ??阿里云[官网链接](ht ...

  9. 天才少年稚晖君 | 【保姆级教程】个人深度学习工作站配置指南

    天才少年稚晖君 | [保姆级教程]个人深度学习工作站配置指南 来源:https://zhuanlan.zhihu.com/p/336429888 0. 前言 工作原因一直想配置一台自己的深度学习工作站 ...

最新文章

  1. Go 指针,标识符命名规范及关键字
  2. groovy怎样从sql语句中截取表名_《SQL基础教程》学习笔记
  3. Failed to execute goal on project xxx: Could not resolve dependencies for project com
  4. 使用 cx recipe 安装 Hybris Commerce Cloud 之后,遇到 indexer workder failed 错误
  5. CSS3的calc()使用
  6. 根据F12在页面中调整div的大小
  7. MySQL数据库事务及其特性
  8. VC 写 TXT 文件分割器 附代码
  9. nodejs中使用node-sass
  10. GitLab CI的入门搭建
  11. 在opensuse tumbleweed 上开发51单片机
  12. ASP.net 探针
  13. c语言运用(1)口算比赛
  14. SDU程序设计思维Week5-作业 B-TT's Magic Cat
  15. 开源spider一览(zz)
  16. 金融业信贷风控算法2-初等统计理论
  17. unity 回车_Unity InputField空格引起排版错误和回车换行
  18. Linux入门第三天——linux命令(二)
  19. 数据递归查询的两种实现方法
  20. ro服务器物品掉率修改,洪水世界如何调整物品爆率 物品掉率修改方法解析

热门文章

  1. 【JZOJ4253】QYQ在艾泽拉斯
  2. Java基础:Java中四种访问修饰符
  3. 用友SPS和运行维护费区别的详解
  4. 【Android】 字体setTypeface动态实现加粗字体
  5. pbl和sbl_acca sbr和sbl通过率哪个更高?
  6. 20155210 潘滢昊 2016-2017-2 《Java程序设计》第3周学习总结
  7. 关于系统滴答定时器SysTick_Config()解析
  8. 我在Java开发工作中的一些心得体会,不断更新中
  9. python只能用一行代码_Python 一行代码能实现丧心病狂的功能
  10. python玩加件大师_如何聘请Python开发人员并确定真正的大师