RN基础知识一

主要讲解以下React的基础知识。

React Native 介绍
文件目录结构
JSX
RN样式
基本标签
插值表达式
调试
事件
生命周期
mobx

React Native 介绍

在这里插入图片描述

文件目录结构

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

JSX

React中写组件的代码格式全称是 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布局
样式继承
单位
屏幕宽度和高度
变换

flex布局

所有容器默认都是flexbox
并且是纵向排列也就是 flex-direction:column

样式继承

背景颜色、字体颜色、字体大小等没有继承

单位

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

屏幕宽度和高度

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

变换

<Text style={{transform:[{translateY:300},{scale:2}]}}>变换</Text>

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事件来获取输入框的值

语法

插值表达式
组件
状态 state
属性 props
调试
事件
生命周期

插值表达式

import React from 'react';
import { View, Text } from 'react-native';

const Index = () => <View>
  <Text>{"开心"}</Text>
  <Text>{123}</Text>
</View>

export default Index;

组件

函数组件
- 没有state (通过hooks可以有)
- 没有生命周期(通过hooks可以有)
- 适合简单的场景
类组件
- 适合复杂的场景
- 有state
- 有生命周期

函数组件

class Index extends Component {
  render() {
    return (
      <View>
        <Btn></Btn>
      </View>
    );
  }
}
// 函数组件
const Btn = () => <Button title="点我" />

类组件

import React, { Component } from 'react';
import { View, Text } from 'react-native';
class Index extends Component {
  render() {
    return (
      <View>
        <Text>类组件</Text>
      </View>
    );
  }
}
export default Index;

状态 state

import React, { Component } from 'react';
import { View, Text } from 'react-native';
class Index extends Component {
  // 1 声明state
  state = {
    num: 100
  }
  render() {
    return (
      <View>
        {/* 2 使用state */}
        <Text onPress={this.handlePress} >{this.state.num}</Text>
      </View>
    );
  }
  // 3 修改state
  handlePress = () => {
    this.setState({ num: 1010 });
  }
}
export default Index;

属性 props

父子传递数据的关键

import React, { Component } from 'react';
import { View, Text } from 'react-native';
class Index extends Component {
  render() {
    return (
      <View>
        <BigText fontColor="red" >大博妞</BigText>
      </View>
    );
  }
}

class BigText extends Component {
  render() {
    // 通过props来接收父组件传递的数据
    return <Text style={{ color: this.props.fontColor }} >
      {/*  children 其实就是插槽 类似vue中的slot  */}
      {this.props.children}
    </Text>
  }
}


export default Index;

调试

分为两种方式

使用谷歌浏览器来调试
1. 使用谷歌浏览器即可
2. 不能查看标签结构
3. 不能查看网络请求
使用rn推荐的工具 react-native-debugger来调试 (老师推荐使用这种方式)
1. 可以查看标签结构
2. 不能查看网络请求

想要查看网络请求

找到项目的入口文件 index.js

加入以下代码即可

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest

事件

绑定时间需要特别注意 this的指向问题,可以总结为如下的方式

使用箭头函数
通过bind重新绑定this
匿名函数

import React, { Component } from 'react';
import { View, Text } from 'react-native';
class Index extends Component {
  state = { num: 100 }
  // 丢失 state
  handlePress1() {
    console.log(this.state);
  }
  // 正常
  handlePress2 = () => {
    console.log(this.state);
  }
  // 正常
  handlePress3() {
    console.log(this.state);
  }
  // 正常
  handlePress4() {
    console.log(this.state);
  }
  // 正常
  render() {
    return (
      <View>
        {/* 导致事件函数中获取不到state */}
        <Text onPress={this.handlePress1} >事件1</Text>
        {/* 正常 */}
        <Text onPress={this.handlePress2} >事件1</Text>
        {/* 正常 */}
        <Text onPress={this.handlePress3.bind(this)} >事件3</Text>
        {/* 正常 */}
        <Text onPress={() => this.handlePress4()} >事件4</Text>
      </View>
    );
  }
}
export default Index;

生命周期

生命周期指的react组件的从创建到销毁的整个过程中会自动触发的函数

主要的生命周期

constructor
- 组件被实例化的时候出发一般用做对组件做初始工作,如设置state等
render
- 组件开始渲染时触发
- 组件被更新时触发 - state和props发生改变时触发
componentDidMount
- 组件挂载完毕,可以发送异步请求获取数据
componentWillUnmount
- 组件被卸载时触发
- 一般用在清除定时器或者取消订阅等

mobx

react中全局数据管理库可以简单的实现数据的跨组件共享类似 vue中的vuex

使用步骤

安装依赖
- 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;

原文链接：https://blog.csdn.net/qq_44875145/article/details/122307908

RN基础知识一

React Native 介绍

文件目录结构

JSX

RN样式

flex布局

样式继承

单位

屏幕宽度和高度

变换

标签

View

Text

TouchableOpacity

Image

ImageBackground

TextInput

语法

插值表达式

组件

函数组件

类组件

状态 state

属性 props

调试

事件

生命周期

主要的生命周期

mobx

使用步骤