如果react基础有些遗忘,可以打开React官网查看
介绍
React Native 是一个使用React和应用平台的原生功能来构建 Android 和 iOS 应用的开源框架。通过 React Native,您可以使用 JavaScript 来访问移动平台的 API,以及使用 React 组件来描述 UI 的外观和行为:一系列可重用、可嵌套的代码。
ReactNative环境搭建相比较繁琐 按照React Native 官网进行安装,就可以了,如果失败可以多试几次,也可以在下方留言,在这里就不再多说了
初始化项目
npx react-native init myApp
安装投影工具
使用方法:
- 下载 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);
mobox
mobox 相对于redux更简单易用,更适合react-Native的开发
简单,可扩展的状态管理
mobox使用方法和其他的状态管理工具类似
- 安装依赖
mobx
核心库mobx-react
方便在react中使用mobx技术的库@babel/plugin-proposal-decorators
让rn
项目支持es7
的装饰器语法的库
yarn add mobx mobx-react @babel/plugin-proposal-decorators
- 在
babel.config.js
添加以下配置
plugins: [
['@babel/plugin-proposal-decorators', { 'legacy': true }]
]
- 新建文件
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();
- 在根组件挂载 需通过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>
);
}
}
- 在其他组件内使用
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;