RN基础知识一_纵使风吹_rn csdn

未知 02-07 2766

RN基础知识一

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

React Native 介绍文件目录结构JSXRN样式基本标签插值表达式调试事件生命周期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> 标签 ViewTextTouchableOpacityImageImageBackgroundTextInput其他 buttonFlatListScrollViewStatusBarTextInput View 相当于以前web中的div不支持设置字体大小,字体颜色等不能直接放文本内容不支持直接绑定点击事件 (一般使用 TouchableOpacity 来代替) Text

文本标签

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

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

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

图片标签

渲染本地图片时

渲染网络图片时,必须加入宽度和高度

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

插值表达式

组件

状态 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; 调试

分为两种方式

使用谷歌浏览器来调试

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

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

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

想要查看网络请求

找到项目的入口文件 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;