第一次使用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				// 代码远程热更新

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

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

相关阅读

相关文章

相关问答

相关文档