主要讲解以下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>

标签

  1. View

  2. Text

  3. TouchableOpacity

  4. Image

  5. ImageBackground

  6. TextInput

  7. 其他

    1. button
    2. FlatList
    3. ScrollView
    4. StatusBar
    5. TextInput

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

语法

  1. 插值表达式

  2. 组件

  3. 状态 state

  4. 属性 props

  5. 调试

  6. 事件

  7. 生命周期

插值表达式

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. 使用谷歌浏览器来调试

    1. 使用谷歌浏览器即可
    2. 不能查看标签结构
    3. 不能查看网络请求

  2. 使用rn推荐的工具 react-native-debugger来调试 (老师推荐使用这种方式)

    1. 可以查看标签结构
    2. 不能查看网络请求

  3. 想要查看网络请求

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

    2. 加入以下代码即可

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

使用步骤

  1. 安装依赖

    • mobx 核心库
    • mobx-react 方便在react中使用mobx技术的库
    • @babel/plugin-proposal-decorators 让 rn 项目支持 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;
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。