天天看點
傳回

第一次使用react-native後的總結

放棄吧，寫的太累，請轉戰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				// 代碼遠端熱更新
redux react rn react-native
上一篇: SSM架構pom.xml配置檔案（選擇Maven項目）
下一篇: C++實戰項目C++實戰項目

繼續閱讀