React Native学习记录文档_react native 学习文档-优快云博客

本文链接：https://blog.youkuaiyun.com/Wing_ever/article/details/104069714

本文记录了React Native的学习过程，包括平台搭建、网络请求（fetch、async/await、axios）以及组件使用（SectionList、Navigation）。详细介绍了FlatList的使用、模块加载（CommonJS和ES6）、App页面框架搭建和navigatorOptions属性。同时，提供了多个实用的小技巧和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React Native学习记录

2020/1/14

1. 关于平台搭建的

node,python2,yarn,android studio
创建项目 --> npx react-native init MyApp
运行项目
1. 在项目目录下开服务 -->npm start or react-native start
2. 运行安卓项目 --> yarn react-native run-android

2. 一些关键语句

// 1. 引入组件，以来react和组件，这两个都要引入，还有需要用到的基础组件也都要引入
import React ,{ Component } from 'react';
import {
    Text,
    View,
    ScrollView
} from 'react native';
// 2. 跟react一样地语法导出组件
export default class myDemo entends Component{
    constructor(){ // 2.1一样地构造函数
        super();
        this.state = {
            state1: 1,
            state2: 2
            ...
        }
    }
    render(){// 2.2 组件渲染主体
        const rowArr = ;//可以写一些需要的参数
        return(
            <></>
        )
    }
    _myRender(){ //2.3 自定义函数，建议使用_进行和库函数的区分
        static defaultprops = {
            data: {}
        }
    }
} 
// 3. 样式定义，建议放在最下面，不影响整个的书写，注意StyleSheets也需要引入
const styles = StyleSheets.create({
});

3.一个下拉刷新的Demo

思路+实现
1. 首先是需要显示的列表数据rowDataArr，来自state（网络数据）
2. 获取到数据按条显示，用一个Row组件来确定每一条的样式，然后再新建一个rowsArr用于返回一个带样式的数组，用map对原始的rowDataArr做处理，得到新的rowsArr
3. 以上即可渲染出一个初始列表
4. 实现下拉刷新这一函数，需要在refreshControl属性中绑定组件
5. 组件需要一个refreshing状态，初始值为false，不刷新
6. onRefresh状态函数，当下拉时，就加载函数
7. 自定义_onRefresh()函数,首先调用函数时，立即改变refreshing状态，变为true；然后开始执行一个函数，创建一个新的数组newData，将在原先的rowDataArr中追加新的数组；更新状态：将rowDataArr更新为追加后的新数组，将refreshing重新置为false。以上全部应当放在一个setTimeout函数中，设置时间为2000ms
8. 以上就是所有的操作

4. FlatList

FlatList的相关属性和函数, renderItem, keyExtactor, numColums,还有跟表头表尾相关的
data目前只能接收Array数据，其他数据都不行
如果render时，FlatList有父组件，父组件都flex不能为1，实践出来的，问我为啥我也不知道，没思考

5. CommomJS和ES6

参考文档，这个作者写得挺详细地：https://ddxg638.github.io/2019/10/19/module/
模块加载，ES6和CommomJS地模块加载机制是完全不同的
TypeScript，js的语法糖，需要install typescript/yarn add到项目里，全局安装即可

2020/1/15

1. 关于网络请求

第一种方式 : fetch

fetch请求网络数据，返回一个promise，then进行处理后，将请求的数据转换成json，再用一个then来重新设置参数状态
要catch((error)=>console.log(error)),否则看不到报错信息等
挂载到componentDidMount这个组件加载完成的钩子上面

function getMoviesFromApiAsync() {
  return fetch('uri')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}

第二种方式 : async/await

try/catch形式,函数名必须加aysnc，所有数据要用await转化为同步数据
在try里面依旧使用fetch请求数据，但是所有请求的异步数据都要用一个await关键字转化为同步数据，然后返回数据
依旧要catch(error)

aysnc function getMoviesFromApiAsync(){
    try {
        let response = await fetch('uri');
        let responseJson = await response.json();
        return responseJson.movies;
    }catch(error) {
        console.error(error);
    }
}

第三种方式 : axios（据说比较推荐）

基于promise地http库，可以用于浏览器和nodejs
使用axios返回的数据reaponse是一个包括请求头和数据的json格式地数据，所以，如果拿到response还需要拿到response.data才是真正拿到了数据
使用axios需要先将axios add到项目里面，然后再引入import axios from ‘axios’
其他的参考github的文档 https://github.com/axios/axios
我看的一个中文文档 https://www.kancloud.cn/yunye/axios/234845

import axios from 'axios';
axios('uri')  //直接就通过这种方式使用，不是axios.get
    .then((response)=>{
        let responseJson = response.data.movies;
        this.setState({
            dataSource:responseJson
        })
    }).catch((error)=>{
        console.log(error)
    }).finally(()=>{
        console.log('finally')
    })
  }

2020/1/16

1. SectionList组件的使用-分组列表

几个重要属性
1. renderItem 用于渲染具体的每一个分组项，不包括组头
2. renderSectionHeader 用于渲染组头，传入参数格式为{ section: {title}}
3. sections 类似于FlatList的data，Array
4. 和FlatList一样，也有列表头和列表尾
小tips
1. 如果有需要返回组件的，不建议直接在内部写组件，可以抽一个方法出去比较好一些，注意一下参数地传递
2. 把样式抽出来，StyleSheet.create({})

 <SectionList
        renderItem={({ item, index, section }) => this._renderItemRow(item,index,section)}
        renderSectionHeader={({ section: { title } }) => this._renderTitle(title)}
        sections={[
            { title: "Title1", data: ["item1", "item2"] },
            { title: "Title2", data: ["item3", "item4"] },
            { title: "Title3", data: ["item5", "item6"] }
        ]}
        keyExtractor={(item, index) => item + index}
    />
)

2. Navigation的使用-多页面开发

需要安装react navigation及很多很多的组件
大概步骤
1. yarn add react-navigation
2. yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context
3. 在android/app/build.gradle 中 dependencies 选项中添加下面这两行:
  implementation ‘androidx.appcompat:appcompat:1.1.0-rc01’
  implementation ‘androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02’
  
  前两天一直放错地方了，放在根目录下的build.gradle里面去了，导致一直在崩，希望现在正常运行吧
4. yarn add react-navigation-stack
需要引入哪些组件
1. createAppContainer–import { createAppContainer } from ‘react-navigation’;–用于装所有导航页面的容器，所有的导航页面都应该到这里面去注册
2. createStackNavigator–import { createStackNavigator } from ‘react-navigation-stack’;–是一个函数，它接受一个路由配置对象和一个可选对象并返回一个 React 组件。
在运行过程中千万要把灯开上，很多东西都要在墙外面下，绝大多数问题都源于没有开灯
创建路由：

const AppNavigator = createStackNavigator(
    {
      Home: HomeScreen,
      Details: DetailsScreen,
    },
    {
      initialRouteName: 'Home',
    }
  );

export default createAppContainer(AppNavigator);

如何在路由之间跳转：挂载到一个方法上，用下面这种方法
1. this.props.navigation.navigate(“组件路由名字”)->跳转到自己页面后，再跳转自己就不再跳转了，这个用得更多
2. this.props.navigation.push(“组件路由名字”)->可以一直压栈往后跳
3. this.props.navigation.goBack(“组件路由名字”)->回到上一级，相当于左上角的返回
4. this.props.navigation.popToTop(“组件路由名字”)->直接回到顶部

onPress = {() => this.props.navigation.navigate('Details')}

跳转生命周期
1. 两个组件路由A和B，当前处于A,跳转到B
2. B的componentDidMount被调用，但是A不会调用componentWillUnmount
3. 如果B返回A，B会调用componentWillUnMount，但是A不会再调用componentDidMount，因为前面已经加载过，一直在堆栈中
如何在导航到路由是，将数据传送过去
1. 需要将参数包装成一个对象，作为navigation.navigate方法的第二个参数传递给路由。如： this.props.navigation.navigate(‘RouteName’, { /* params go here */ })，并且对象参数中可以包含多个参数，推荐使用json
2. 读取页面组件中的参数的方法：this.props.navigation.state.params
3. 可以用个变量来获取所有的this.props,然后调用getParams(参数名,默认值)

2020/1/19

1. 关于搭建一个app页面框架

几个大的东西，底部的tab栏
1. 与跳转相关的放到Navigator中，一个MainTab，是需要导出到app的总组件
2. 里面引入所有对应的screen，与对应的tab信息一起渲染到BottomTabBar中
3. 设置对应的HomeStackNavigation，注册对应的二级界面路由，以及切换到二级界面隐藏tab栏
与tab栏相对应的几个一级页面->放到pages中
一级页面跳转的二级页面->也放到pages中

2. 各种小tips

算了写不来，自己看代码吧（结果还是写了点儿，写在后面了）

2020/1/20

1. navigationOptions的一些相关属性（看的一篇博客里面，直接搬过来了，原博客地址https://blog.youkuaiyun.com/weixin_33742618/article/details/92251318）

title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，不推荐使用
header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null
headerTitle：设置导航栏标题，推荐
headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"
headerRight：设置导航条右侧。可以是按钮或者其他视图控件
headerLeft：设置导航条左侧。可以是按钮或者其他视图控件
headerStyle：设置导航条的样式。背景色，宽高等
headerTitleStyle：设置导航栏文字样式
headerBackTitleStyle：设置导航栏‘返回’文字样式
headerTintColor：设置导航栏颜色
headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0
gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭
screen：对应界面名称，需要填入import之后的页面
mode：定义跳转风格
card：使用iOS和安卓默认的风格
modal：iOS独有的使屏幕从底部画出。类似iOS的present效果
headerMode：返回上级页面时动画效果
float：iOS默认的效果
screen：滑动过程中，整个页面都会返回
none：无动画
cardStyle：自定义设置跳转效果
transitionConfig：自定义设置滑动返回的配置
onTransitionStart：当转换动画即将开始时被调用的功能
onTransitionEnd：当转换动画完成，将被调用的功能
path：路由中设置的路径的覆盖映射配置
initialRouteName：设置默认的页面组件，必须是上面已注册的页面组件
initialRouteParams：初始路由参数

2020/1/22

记录一个FlatList的注意点，需要设置FlatList本身的flex和父组件的flex都为1，才能在条数超出屏幕显示范围时进行滚动查看，无论它有多少个父组件，都要设置flex:1，全部都要设置好才行
关于路由标题设置，如果有StackNavigator,需要在stack和原本界面中都设置headerShown:false才能实现不显示标题头的效果
如果想要改变TabBbottom中的显示的标题的名字，可以通过在navigationOptions中设置title，如果想要改变头部header的名字，可以在对应界面的navigationOptions中设置headerTitle来实现效果
TextInput组件竟然自带padding，要手动把它的padding设置为0，才能在输入框比较小的时候完全显示出内容来