本篇只用作初学RN时的快速入门查看引用了部分学习资料可供参考如果有描述有问题的地方请随时提出。1.React Native基础1.1 RN三要素1.从库import需要的组件2.export default 要呈现的函数/class组件3.定义函数组件/class组件1.2 组件定义函数组件const Xx (传递的参数:ts要指定传参类型) { return ( xx/ xx/ ); };Class组件import { Component } from react; class Xx extends Component { //class组件要从component继承 render() { //class组件里一定要有render()函数返回值会被渲染为React元素 return ( xx/ xx/ ); } } export default xx;不论是采用函数还是Class自定义了组件后可以在一个组件里调用其它组件**自定义组件首字母必须大写**。此外在写组件时如果是设置组件的相关属性应在前写而显示的内容children元素应该在两个之间如下所示Text style {styles.container}it is a text/Text如果组件没有children组件则可以使用自闭合标签此时一个即可FlatList style {styles.container}/1.3 JSX语法JSX语法使你可以直接在JS中输出元素import { Text } from react-native; const Person () { const name ooo; return Text my name is {name} /Text; } export default Person;其中{}内可以使用任意JS的表达式、包括调用函数等等不妨把{}想象成在JSX中打开了一个可以调用JS功能的传送门而要调用JS功能就要用{}。1.4 Props属性Props使得我们可以定制组件感觉就是传参下面举两个例子①定义多个人名import { Text } from react-native; const Person (props) { return Text my name is {props.name} /Text; } const Family () { return ( Person name oo/ Person name pp/ / ); } export default Family;②定义props如果设置style要用{{}}这是因为引用JS值时要用{}括起来而***用JS定义一个对象时本身也要用{}括起来所以要在JSX传递一个JS对象值时要用{{}}***import {Text,View,Image} from react-native; const Cat () { return ( View Image source {{uri: https://reactnative.dev/docs/assets/p_cat1.png}} style {{width:200,height:200}} / /View ); }; export default Cat;2 HookHook是一种特殊的函数可以让你“钩住”一些React的特性让函数组件拥有管理状态、处理生命周期的能力只能在函数组件里使用不能在class组件里使用。Hook函数以use开头命名常见的有useStateuseContextuseEffectuseReducer等等。2.1 useStateState状态用于记录随时间或者用户交互而变化的数据使组件具有记忆。一般可以用React的useState Hook来为组件添加状态从而在函数组件重新渲染执行时能够保持住之前的状态***useState 返回[状态变量Xx更新函数为了规范一般用setXx]***。在给state组件赋值时不要直接赋值状态修改应采用this.setState()的方法从而能够让React知道状态的变化触发重渲染。下面用函数组件和Class组件的形式实现同一个功能对比两种写法的差别函数组件import {useState} from react; //先导入useState import {Button,Text} from react-native; const Person (props) { //useState 返回[状态变量更新函数] //这里的 const 并不意味着状态本身不可变而是指包含状态和更新函数的引用不会改变 const [isStrong, setIsStrong] useState(false); return ( Text I am {props.name}, I am {isStrong ? Strong : weak} /Text Button onPress {()setIsStrong(true)} //isStrong为布尔值不是修改函数 disabled{isStrong} title {exercise} / / ); }; const Family () { return Person name ooo/ } export default Family;Class组件要用this关键字获取this.props.xx和this.state.xx并采用this.setState修改变量。import {Button,Text} from react-native; import {Component} from react; class Person extends Component{ state { isStrong: false} render(){ return ( Text I am {this.props.name}, I am {this.state.isStrong ? Strong : weak} /Text Button onPress {()this.setState({isStrong:true})} disabled{this.state.isStrong} title {this.state.isStrong?Strong:exercise} / / ); } }; class Family extends Component{ render(){ return Person name ooo/ } } export default Family;2.2 useEffectuseEffect也是一个Hook允许组件与外部系统同步useEffect(setup,dependencies) // 几乎实现了watch功能以及vue里的onMounted和onUpdated功能 // setup为处理Effect的函数 // 可选dependencies // 1、当不赋值时组件每次渲染时都会执行 // 2、当赋值为[]只执行一次 // 3、此外当它赋值的值改变时执行。可以用useEffect自动读取接口下面举一个采用useEffect实现搜索功能12 useEffect 的依赖项实现搜索课程_哔哩哔哩_bilibiliconst fetchData async() { const res await fetch(); const { data } await res.json(); setCourses(data.courses); }; // 在输入值inputword发生改变时调用fetchData() useEffect(() { fetchData(); }, [inputword]); return( View style {styles.container} Text请输入要搜索的内容:{inputword}/Text TextInput style {styles.input} placeholder 请在此输入搜索内容 onChangeText {text setInputword(text)} defaultValue {inputword} / {courses.map((course) ( Text key {course.id} {course.name} /Text ))} /View )其它详细的说明和使用见useEffect – React 中文文档3.样式要点概括①React-Native只能用JS对象写样式要用StyleSheet.create({})来创建默认为flex布局不需要设置display:flex。关于flex的参数详见使用 Flexbox 布局 · React Native 中文网。②采用style定义属性支持以数组形式来设置style如有相同的属性遵循靠后规则优先。③属性名的写法为驼峰法与css用-分割不同。④尺寸不需要加单位表示的是与设备像素密度无关的逻辑像素点。举个简单例子import { StyleSheet, Text, View } from react-native; const LotsOfStyles () { return ( View style{styles.container} Text style{styles.red}just red/Text Text style{styles.bigBlue}just bigBlue/Text Text style{[styles.bigBlue, styles.red]}bigBlue, then red/Text Text style{[styles.red, styles.bigBlue]}red, then bigBlue/Text /View ); }; const styles StyleSheet.create({ container: { marginTop: 50, }, bigBlue: { color: blue, fontWeight: bold, fontSize: 30, }, red: { color: red, }, }); export default LotsOfStyles;4.长列表组件4.1 ScrollViewView组件不具备页面滚动功能ScrollView组件可以实现这一点通常可以用map循环数组const data [...]; ScrollView {data.map((item)( Text key {item.id} style {styles.title} {item.title} /Text ))} /ScrollView4.2 FlatList当需要渲染的内容太多时如果还是采用map的方式用ScrollView渲染会导致初始化加载时间太长此时就需要采用FlatList组件进行按需渲染。const data [...]; // 接收的参数依次是要遍历的数据,要遍历渲染出来的内容,唯一标识 // 如果要渲染的内容比较复杂就单独写一个组件出去 FlatList style {styles.container} data {data} renderItem {({item}) Text style {styles.title}{item.title}/Text} keyExtractor {item item.id} ListHeaderComponent {} ListFooterComponent {} / // 还可以设置ListHeaderComponent和ListFooterComponent来设置长列表顶部和底部的内容 // 还可以设置onEndReached和onEndReachedThreshold设置触底时要执行什么函数、距离底部还有多少可见区域时触发在ScrollView里可以嵌套FlatList但要设置参数让horizontal{true}此时ScrollView是上下滚动FlatList是左右滚动这样才不会报错。关于FlatList的更多功能如分割线、没有数据时的显示、拉到底部时的操作等等详见FlatList · React Native 中文网4.3 RefreshControlRefreshControl支持下拉刷新在ScrollView和FlatList中都适用。import { useState } from react; import { ScrollView, RefreshControl, Text, StyleSheet } from react-native; export default function App(){ const [ refreshing, setRefreshing ] useState(false); const onRefresh () { setRefreshing(true); setTimeout((){ setRefreshing(flase); },2000); }; return( ScrollView style {styles.container} refreshControl {RefreshControl refreshing {refreshing} onRefresh{onRefresh} tintColor {orange}/ } Text style {styles.content} xx /Text /ScrollView ); }5. 核心组件和APIreact-native提供了一些核心组件常用的还有长列表FlatList、可以用于分组数据的SectionList等等。此外还有/这个JSX标签称为Fragments片段这个组件默认并列布局。由于JSX语法要求根元素必须为单个元素此前在设置多个并列元素时不得不套一个没有实际用处的View/View但有了Fragment后就不用这样了。其它组件和API具体见核心组件和API · React Native 中文网AccessibilityInfo · React Native 中文网资料引用 React Native 中文网 · 使用React来编写原生应用的框架