第一次使用react-native后的总结

轩辕修能
2023-12-01

放弃吧,写的太累,请转战flutter,或者用RN的路由套h5

关于RN的介绍就不多说了,已经好几年了,如今RN的生态圈也已经很成熟了,
基本配套的UI和插件,95%都能找到,如果你有react的基础,1-2天内上手是
没有问题的,如果你没有接触过react,可能需要几天时间适应它的写法,除了对
于前端开发的来说,配置安卓开发环境麻烦点,可能一部分小伙伴,因为这个配
置环境问题就放弃了,window系统有点麻烦,mac系统1小时左右吧,网速快的话
加上爬梯子,估计用不了1小时。但如果你真想学这个东西,就必须待过这一关!
关于RN的基础组件,熟记的有Text文本组件,image 组件,View组件,这几个是最常用的,基本写的最多的
就是View组件,样式呢最常用的就是flex布局!

首先,如果你是第一次写RN,或者需要你自己搭项目架子干活,你就要考虑这个架子结构了,以及选择什么UI了,
要考虑路由跳转,还要考虑你项目要不要使用redux,与后台对接用哪个网络请求,本地存储,
公共组件封装复用性等.

不对RN技术好不好用做任何评价,每个人的用过后的感受不同,不要纠结是用RN,flutter,
weex,nativescript啊,反正不是很推荐后两个,你可以在RN 和 flutter 中选择一个

基础视频教程:

https://search.bilibili.com/all?keyword=react%20native&from_source=banner_search

实战项目

https://coding.imooc.com/class/89.html(账号:15138798639,密码:qin15138)

## 源码目录结构(给第一次搭RN架子的小伙伴一个参考)

​    |-- android

​    |-- bundles

​    |-- ios

​    |-- node_modules

​    |-- src                        // 项目源代码目录,文件名也可以写 lib

​        |-- router                  // 配置所有路由

​        |-- icons                   // 放置本地所有的icon图标

​        |-- imgs                    // 放置本地图片

​        |-- components              // 放置公共组件

​        |-- theme                   // 配置的皮肤 ,根据项目需要自己选择

​        |-- utils                   // 封装所有的工具函数

​        |-- redux                   // 数据仓库(这几个文件是把redux进行拆分)

​            |-- actions.js                 

​            |-- reducers.js                

​            |-- store.js                   

​            |-- types.js        

​        |-- views                   // 所有的页面(这里你可以根据功能再继续划分)你也可以用pages

​            |-- home                    // 首页

​            |-- list                    // 列表

​            |-- shopcar                 // 购物车

​            |-- myself                  // 个人中心

​    |-- App.js                          // 跟组件

配置android,ios 快速启动,再package.json 中

  "scripts": {
    "start": "react-native run-android",
    "ios": "react-native run-ios",
  },

运行

// 安卓
# npm start
// ios
# npm run ios

路由选择

官方推荐
https://reactnavigation.org/docs/zh-Hans/navigation-views.html

第三方封装
https://github.com/aksonov/react-native-router-flux

关于以上两个路由,个人推荐使用官方推荐的路由,第二个封装好的虽然也很好用,但还是有一个连点触发同一个屏幕出现两次的问题

官方路由 单独抽离出来的实例

在router 文件夹下的 index.js中,

安装 ... 省略

// 将所有的路由单独抽离出一个单独的文件

import { createStackNavigator, createAppContainer } from "react-navigation";
// createStackNavigator  是一个返回 React 组件的方法

import Home from './Home'
import Find from './Find'

// 第一种写法
// const AppNavigator = createStackNavigator({ 
//   Home: { screen: Home } 
// });

/**
 * 简写
 */
// createStackNavigator是一个函数,它接受一个路由配置对象和一个可选对象并返回一个 React 组件。
// 路由配置对象中的key是路由名称,value是该路由的配置。 配置中唯一必须的属性是screen(用于路由的组件)。
const AppNavigator = createStackNavigator(
  {
    Home,
    Find
  },
  {
    initialRouteName: "Home",
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }
);

export default createAppContainer(AppNavigator);

路由挂载(注意引入路径)

import React, { Component } from 'react'
import Router from './view/router'
class App extends Component {
  render() {
    return (
      <Router />
    )
  }
}
export default App;

路由跳转(注意防重复点击出现多个相同的屏幕)

// 这种跳转方法,不会触发多次点击跳转相同的路由地址,它只会执行一次,向路由栈中推入路由
this.props.navigation.navigate('路由的key值')

// 这种跳转方法,我们会向导航堆栈中添加新路由,
// 多次点击跳转同一个路由,每次都会触发跳转到要调入的路由,会多次执行想路由栈添加路由
this.props.navigation.push('路由的key值')

// 返回上一级页面
this.props.navigation.goBack()

路由传参

  /**
   * 需要将参数包装成一个对象,作为navigation.navigate方法的第二个参数传递给路由。
   * 如: * this.props.navigation.navigate('RouteName', { params go here  })
   * 
   * 读取页面组件中的参数的方法:this.props.navigation.state.params。
   */

    // 1.第一种传参
      this.props.navigation.navigate('Find', {
        obj:{
              itemId: 86,
              otherParam: 'anything you want here',
            }
      })
    //  第一种传参,取参数
      this.props.navigation.getParam('obj')

  // 第二种传参
  this.props.navigation.navigate('Find', {
            itemId: 86,
            otherParam: 'anything you want here',
          })
    // 第二种传参 取参数
    this.props.navigation.state.params

    // 3 如果你想通过 prop 直接访问 params(例如: this.props.itemId)而不this.props.navigation.getParam,您可以使用社区开发的 react-navigation-props-mapper软件包。

    /**
    navigate接受可选的第二个参数,以便将参数传递给要导航到的路由。 例如:this.props.navigation.navigate('RouteName', {paramName: 'value'})。
    我们可以使用this.props.navigation.getParam读取参数
    你也可以使用 this.props.navigation.state.params作为getParam的替代方案, 如果未指定参数,它的值是 null。
    */

路由配置顶部导航

  // 导航上的文字直接在各自的组件中
  // 配置title属性,值可以是个字符串,也可以是个组件 
  class Home extends React.Component {
    static navigationOptions = {
      title: 'Home',
    };
    /* render function, etc */
  }

  /**
   * 在标题中使用参数  
  */
  class DetailsScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
      return {
        title: navigation.getParam('otherParam', 'A Nested Details Screen'),
      };
    };
    /* render function, etc */
  }

  /**
   * 使用setParams更新navigationOptions(导航上的配置),用this.props.navigation.setParams来做到这一点
  */
    /* Inside of render() */
    <Button
      title="Update the title"
      onPress={() => this.props.navigation.setParams({otherParam: 'Updated!'})}
    />
  /**
   * 调整标题样式
   * headerStyle:一个应用于 header 的最外层 View 的 样式对象, 如果你设置 backgroundColor ,他就是header 的颜色。
  headerTintColor:返回按钮和标题都使用这个属性作为它们的颜色。 在下面的例子中,我们将 tint color 设置为白色(#fff),所以返回按钮和标题栏标题将变为白色。
  headerTitleStyle:如果我们想为标题定制fontFamily,fontWeight和其他Text样式属性,我们可以用它来完成。
  */
  // 只再当前路由有效果
  class HomeScreen extends React.Component {
    static navigationOptions = {
      title: 'Home',
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    };

    /* render function, etc */
  }

  // 一次配置受用终身,再路由的全局上配置
  const AppNavigator = createStackNavigator(

    {
      defaultNavigationOptions: {
        headerStyle: {
          backgroundColor: '#f4511e',
        },
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },

  );

关于与后台对接,使用featch封装 get – post (参考例子)
关于过期处理,请求延时自己处理

    // 定义一个常量,用来切换测试包和正是包的接口地址
    const dev = "你的接口地址";
    /**
         * @class Http   api接口类
         * @method get || post   get/post请求方法
         * @param  {url:'传入的url',params:“传入的参数,一般是个对象”}
         *
        */
    export default class Http {
        // 静态方法 get请求
        static get(url, params) {
            url = dev + url;
            console.log(url);
            //判断有木有参数
            if (params) {
                // 定一个空数组
                let paramsArray = [];
                //  拆分对象
                Object.keys(params).forEach(key =>
                    paramsArray.push(key + "=" + params[key])
                );
                //判断是否地址拼接的有没有 ?,当没有的时候,使用 ?拼接第一个参数果有参数拼接,则用&符号拼接后边的参数           
                if (url.search(/?/) === -1) {
                    url = url + "?" + paramsArray.join("&");
                } else {
                    url = url + "&" + paramsArray.join("&");
                }
            }
            // 返回一个promise
            return new Promise((resolve,reject) => {
                //fetch请求
                fetch(url, { method: "GET" })
                    .then(response => response.json())
                    .then(result => {
                        resolve(result);
                    })
                    .catch(error => {
                        reject(error);
                    });
                });
        }
        //  post请求封装
        static post(url, obj) {
            url = dev + url;
            // console.log(url)
            return new Promise((resolve, reject) => {
                fetch(url, {
                        method: "POST",
                        headers: {
                        "Content-Type": "application/json"
                        },
                        body: JSON.stringify(obj)
                    })
                    .then(response => response.json())
                    .then(result => {
                        // console.log(result)
                        resolve(result)
                    }).catch(error=>{
                        reject(error)
                    });
            });
        }
    }

调用 方法

// 先倒入这个js文件
import js_name from '你的文件路径'
// 在你获取接口数据的函数中调用静态方法
js_name.get();    // get请求获取数据
js_name.post();   // post请求传数据 

UI库选择(直接github 搜吧,不放链接地址了)

teaset						// 国人开发的中文版文档的UI库,功能简单,不过弹窗有点坑
mobile.ant.design			// 阿里开源的的带有中文版文档的一个UI库,但属于个人开发的,star数不高
react-native-ui-kitten		// 外国人开发的UI库,英文文档
react-native-paper			// 高仿谷歌material风格的UI库
react-native-material-ui	// 仿谷歌material风格的UI库
eact-native-elements		// 社区开发的一个UI,start数很高,然而组件并不是很丰富

插件总结(直接在github 上 或者npm 上搜吧)

react-native-vector-icons					// RN图标库
react-native-image-pickerRN					// 调用相机和相册
react-native-app-intro						//RN的闪屏页,基于react-native-swiper组件再开发
react-native-shadow							//RN阴影处理
react-native-scrollable-tab-view			//RN中扁平风格的Tab选项卡
react-native-blur							//RN中四周圆角的Tab选项卡
react-native-popup-dialog					//RN 弹出框
react-native-image-crop-picker				//RN全屏查看图片
react-native-gifted-form					//RN表单插件
gl-react-native-v2							//RN背景色渐变,让图片以不同的动画方式展示出来,图片虚化等
react-native-calendars						//RN 日历插件
react-native-swipeout			//RN中iOS风格的swipeout按钮,可以实现滑动后,在右侧或左侧出现几个按钮
react-native-textinput-effects	// RN中带动画风格的输入框
react-native-modalbox			// RN中可以下滑关闭的弹窗,支持多种弹窗位置
react-native-lightbox			// RN中点击某个图片||盒子后进入全屏
react-native-splash-screen		// RN中的启动画面,在加载应用程序时隐藏
react-native-action-button		// RN中可定制多动作的按钮,包括按钮旋转
react-native-foldview			// RN中可折叠的列表块
react-native-spinkit			// RN中动画的loading
react-virgin					// RN中底部导航tab切换
react-native-parallax-scroll-view		// RN中向上滑动列表时,隐藏顶部的某个块级盒子,向下滑动时,动画放大的形式显示隐藏的元素
    react-native-tableview			// RN中列表组件
react-native-keyboard-spacer		// 解决RN中ios上的键盘遮挡输入框,RN高本不支持
react-native-datepicker				// RN中多种展示形式的日历插件
react-native-orientation			// RN中监听设备的方向改变
react-native-picker					// RN中底部弹出显示的三级城市联动
react-native-circular-progress		// RN中的圆环,类似于echarts的环形图
react-native-tinder-swipe-cards		// RN中带动画的卡片,使用场景不详
react-native-collapsible			// RN中的动画可折叠组件,适用于手风琴,切换等
react-native-charts-wrapper			// RN中Echarts图表
react-native-image-viewer			// RN中的图片放大查看
react-native-sglistview				// RN中对用户操作ListView列表后的位置记忆实现
react-native-pathjs-charts			// RN中图表实现,同echarts
react-native-fast-image				// RN中图片规则瀑布流,无限滚动
react-native-loading-spinner-overlay			// RN中自定义loading加载gif图
react-native-search-bar				// RN中图片文字都在中间的搜索框
react-native-qrcode					// RN中二维码生成器
tcomb-form-native					// RN中Form表单
react-native-storage				// RN中本地存储
react-native-progress				// RN中的加载进度条
react-native-data-table				// RN中的表格插件,带检索匹配,由于使用率不高,Start数很低
react-native-echarts				// RN中的Echarts图表插件
react-native-dropdownalert			// RN中仿自带的Alert组件的提示语弹窗
react-native-simple-radio-button				// RN中动画单选按钮组件Radio
react-native-interactable				// 有很强交互效果的table视图
react-native-simple-markdown			// markdown编辑器
react-native-img-cache						// 图片缓存
GirdShow-React-Native					// RN中的表格插件,由于使用率不高,Start数很低
lottie-react-native						// RN动画库
react-native-maps					// RN地图插件
react-native-swiper					// RN轮播图
react-native-drawer					// RN侧滑抽屉
react-native-material-kit			// RN中仿谷歌的Material Design风格的Buttons
react-native-svg					// RN中的使用svg图
react-native-storage				// 本地存储
react-native-code-push				// 代码远程热更新
 类似资料: