React Native学习记录文档

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({})

  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.csdn.net/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，才能在输入框比较小的时候完全显示出内容来