国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React Native 開發(fā)小Tips

kevin / 2660人閱讀

摘要：除此之外，部分頁面，其實完全可以由網(wǎng)頁去支持多端共用的功能，樓主親身遇到過的場景，就是圖表的繪制，我們的方案是一個頁面，需要微信，手機網(wǎng)頁，和都具備該功能，而且我們手機網(wǎng)頁和客戶端打開的稍微有區(qū)別，需要隱藏。

相信好多寫React Native的都是前端出身，當然遇見問題的，也很多時候會想從前端出發(fā)，但由于React Native本身的限制，并不是支持足夠多的屬性和樣式，所以Bo主結合自己的開發(fā)實踐,并總結了一些將來開發(fā)可能會遇見的問題并給出一些小的代碼參考;(PS實現(xiàn)不好的希望能大家提出看法，自己也會更新)。

自己將代碼放到了example下，并且做成了一個App.這樣可以查看具體運行效果：

截圖1:

項目地址

開始 
git clone https://github.com/JackPu/react-native-tips.git

進入example 目錄

react-native start

用xcode打開ios目錄下的項目，運行就可以看到上面的運行界面了。

1.關于按鈕

寫習慣了html我們看到按鈕，第一時間想到的便是Button,但是目前React Native并沒有這個組件，不過沒關系，我們可以使用 TouchableHighlight,TouchableOpacity來實現(xiàn)按鈕組件，當然常用的樣式可以應用在上面，形成格式各樣的按鈕。


      This is Button

如果你實在非常喜歡按鈕的話，沒關系，我們引入已經(jīng)封裝好的組件react native button

npm install react-native-button --save

安裝好后，你就可以大膽的這樣寫了:

2.文字過長隱藏的問題

CSS3中大家可能都會用到text-oveflow，然而RN 的Text并沒有這個屬性，不過我們可以通過設置numberOfLIne 或者JS自動計算來實現(xiàn):

your long text here
3.關于百分比寬度

寫樣式的時候有的時候我們經(jīng)常會用到百分比，然而React Native并不支持這樣的單位，除了用Flex布局外，我們可以通過另外一個方式獲得:Dimensions。當然由于都是JS因此我們可以取巧，用JS計算下，比如30%,

var React = require("react-native");

var {Dimensions,StyleSheet,Component} = React;
// 我們可以使用Dimensions 去獲取窗口寬度
var fullWidth = Dimensions.get("window").width; 

let thirtyPercentiWidth = fullWidth * 0.3;

// Your stylesheet
var styles = StyleSheet.create({
    .wrap{
        width: thirtyPercentiWidth,
    }
});
4.Grid列表

在App中的常用的列表除了水平列表外，我們還需要柵格化的列表。比如類似于下面這樣：

做出類似的界面其實只要限制住你每一個小方塊的寬度就行了。

var styles = StyleSheet.create({
  list: {
    justifyContent: "flex-start",
    flexDirection: "row",
    flexWrap: "wrap"
  },
  row: {
    justifyContent: "center",
    padding: 5,
    margin: 5,
    width: (Dimensions.get("window").width - 30) / 3,
    height: 100,
    backgroundColor: "#fff",
    alignItems: "center",
  },
  thumb: {
    width: 55,
    height: 55
  },
  text: {
    flex: 1,
    marginTop: 10,
  }

});

// render row

  this._pressRow(rowID,rowData)} underlayColor="rgba(0,0,0,0)">
            
              
                
                
                  {rowData["game_name"]}

詳細代碼

5.混合使用webview

無論什么時候，作為一個前端er，在遇到比較棘手的問題時候，我們都可以回到原點，用一個網(wǎng)頁去解決。因此無論如何都需要學會使用React Native webview。除此之外，部分頁面，其實完全可以由網(wǎng)頁去支持多端共用的功能，樓主親身遇到過的場景，就是圖表的繪制，我們的方案是一個頁面，需要微信，手機網(wǎng)頁，和android,ios都具備該功能，而且我們手機網(wǎng)頁和客戶端打開的稍微有區(qū)別，需要隱藏header。

上圖是網(wǎng)頁版本的，而我們通過設置頁面的查詢參數(shù)即來自客戶端的請求或者微信的都會設置為類似這樣的url

https://xxx.yoursites.com/page.html?hide_header=1&client=ios

而在React Native 設置webview 的代碼也很簡單，你可以查看這里代碼

6.設置網(wǎng)絡請求Fetch

由于客戶端也需要大量接口的支持，因此我們一定避免單兵作戰(zhàn)，需要請求時候用個fetch，這樣其實非常不易控制數(shù)據(jù)的流入。建議在fetch上在封裝一次，這樣我們就可以做更多的事情，比如做統(tǒng)一的錯誤提示，用戶失效控制，統(tǒng)一設置接口請求的header,同時可以方便我們進行調(diào)試，在chrome中查看具體的接口數(shù)據(jù)等。

send(url,options) {
        var isLogin = this.isLogin();
        
        var self = this;        
        var defaultOptions = {
            method: "GET",
            error: function() {
                options.success({"errcode":501,"errstr":"系統(tǒng)繁忙,請稍候嘗試"});
            },
            headers:{
                "Authorization": this.getAccessToken(),
                "Accept": "application/json",
                "Content-Type": "application/json",
                "App": "vanthink-ios-app"
            },
            data:{
                // prevent ajax cache if not set 
                "_regq" : self.random()
            },
            dataType:"json",
            success: function(result) {}
        };
        
        var options = Object.assign({},defaultOptions,options);
        var httpMethod = options["method"].toLocaleUpperCase();
        var full_url = "";
        if(httpMethod === "GET") {
            full_url = this.config.api +  url + "?" + this.serialize(options.data);
        }else{
            // handle some to "POST"
            full_url = this.config.api +  url;
        }
        
        if(this.config.debug) {
            console.log("HTTP has finished %c" + httpMethod +  ":  %chttp://" + full_url,"color:red;","color:blue;");
        }
        options.url = full_url;
        
        
        var cb = options.success;
      
        // build body data 
        if(options["method"] != "GET") {
            options.body = JSON.stringify(options.data);
        }
  
        // todo support for https
        return fetch("http://" + options.url,options)
               .then((response) =>  response.json())
               .then((res) => {      
                    self.config.debug && console.log(res);
                    if(res.errcode == 101) {
                        return self.doLogin();
                    }

                    if(res.errcode != 0) {

                        self.handeErrcode(res);
                    }  
                    return cb(res,res.errcode==0);
                })
                .catch((error) => {
                  console.warn(error);
                });
    },
    
    
    handeErrcode: function(result) {
        // not login
        if(result.errcode == 123){
           // your code to do
            
            return false; 
        }
       
        return this.sendMessage(result.errstr);
    },
7.管理你的Icon

在網(wǎng)頁中我們經(jīng)常可以看到非常多的小的icon，我們習慣性的用Css Sprite 和 Icon Font或者 Svg去解決這些問題。移步到客戶端，同樣，我們也有很多解決方案，但是有一點必須要明確，將icon放到同一個地方，方便管理。這里有很多第三方庫選擇：

react-native-icons

react-native-vector-icons

如果自己寫的話，可以寫到一個組件中，通過設置一個基類，然后進行繼承和導出。設置不同的圖標思路大概如下：

import React, { TouchableHighlight,View,Text, Image, StyleSheet, PropTypes } from "react-native";

// 基本的樣式
let styles = StyleSheet.create({
  icon: {
    width: 21,
    height: 21,
    marginTop: 4,
    marginRight: 15,
  }, 
});

class Icons extends React.Component { 
    constructor(props) {
        super(props);
        this.press = this.press.bind(this);
      }

      press() {
        if(typeof this.props.press == "function") {
            this.props.press();
        }else{
            // TODO
        }
        
      }
      _renderIcon() {
        return (
            
        );  
      }

      render() {
        return (
          
            {this._renderIcon()}
          
        );
      }
    
}

// 繼承
class CloseIcon extends Icons {
    _renderIcon() {
        return (
            
        );  
      }
}
class SearchIcon extends Icons {
    _renderIcon() {
        return (
            
        );  
      }
}

// 導出
module.exports = {
    CloseIcon,
    SearchIcon,    
};

而我們則可以在頁面中這樣使用

import {CloseIcon,SearchIcon} from "../style/icon";

...

render() {
    return(
        //... some code
        
    );
}

8.構建一個導航條

當然制作App中，我們經(jīng)常會遇到制作導航條的要求,

大家可以使用react-native-navbar,自己寫也非常簡單，樣式大致就這些:

    navBar: {
        height: 44,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "stretch",
        backgroundColor:"#fff"
    },
    customTitle: {
        position: "absolute",
        left: 0,
        right: 0,
        bottom: 7,
        alignItems: "center",
    },
    navBarButtonContainer: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "stretch",
    },
    navBarButton: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    navBarButtonText: {
        fontSize: 17,
        letterSpacing: 0.5,
    },
    navBarTitleContainer: {
        position: "absolute",
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        justifyContent: "center",
        alignItems: "center",
    },
    navBarTitleText: {
        fontSize: 17,
        color: "#333",
        fontWeight: "500",
    }

用法如下:


    
        NavBar3
    

    
        
            
                
            
        
    
    
        
            
                Done

需要注意，如果設置頂部導航條，記得還有狀態(tài)欄的高度要算進去，一般設置都為22

9.結合 Redux

想了想做個 App，有下面幾個就可以了，界面不low, 數(shù)據(jù)支撐，用戶響應即可。但是我們在做的時候Css和Html確實解決了Bo主不會寫界面的問題，但是后面兩個咋個辦呢？于是乎官方推出了一個新的工具[Redux]()。
精煉一點就是Redux就是去去管理頁面的狀態(tài)（用戶響應）及數(shù)據(jù)（接口數(shù)據(jù)相關）。Redux中強調(diào)了三點:

單一數(shù)據(jù)源

State 是只讀的

使用純函數(shù)來執(zhí)行修改

而且Redux支持服務端，這樣更加方便我們在進行異步的遠程數(shù)據(jù)獲取的實現(xiàn)。

一個簡單的使用Demo

10.合理的使用第三方插件

盡管React Native 正式發(fā)布的時間還不算非常長，但是npm上已經(jīng)擁有了大量的第三方類庫，因此我們在遇到問題或者強調(diào)快速開發(fā)的時候我們可以去第三方網(wǎng)react.parts站尋找更好的組件。自己覺得常用的一些如下：

react-native-search-bar
一款帶有常用搜索框的組件

react-native-refreshable-listview 一款帶有刷新列表組件

react-native-simple-router

react-native-video

react-native-router-redux 一款路由和redux結合的插件，組件比較豐富

react-native-image-picker 一款選擇圖片的插件

autobind-decorator 省去每次都要聲明eventHandle.bind(this)

11.調(diào)試

除了開發(fā)外，我們還希望能夠很好的調(diào)試我們的App.默認的話，就像我們調(diào)試我們的web頁面一樣，我們可以用常用的console.log,console.error,console.warn，由于支持chrome調(diào)試，我們可以在控制臺看到打印的數(shù)據(jù)。當然，我們也可以真機調(diào)試，比如連上你的iPhone,需要注意的是:

你需要修改調(diào)試js的地址，在AppDelegate.m中將"localhost"改成你電腦的ip就可以了。

選中你的iPhone就可以調(diào)試了。

當然我會持續(xù)更新，也歡迎大家pr，項目地址


最后安利一個ppt https://yunpan.cn/cqKEvrPXAS3gy （提取碼：0375）

同步博客地址：http://www.jackpu.com/react-n...

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86421.html

相關文章

  • FCC 成都社區(qū)·技術周刊 第 12 期

    摘要：詳情怎樣規(guī)避地獄作者先介紹什么是地獄，以及在開發(fā)過程中怎樣去規(guī)避地獄，一時爽性能問題火葬場。詳情其他亮點匯總開發(fā)者大會已于北京時間月日凌晨在美國山景城正式啟幕。 【前端】 1. JavaScript 的新數(shù)據(jù)類型：BigInt BigInt?是 JavaScript 中的一個新的數(shù)字基本(primitive)類型，可以用任意精度表示整數(shù)。使用?BigInt?可以安全地存儲和操作大整數(shù)，...

    fanux 評論0 收藏0

  • FCC 成都社區(qū)·技術周刊 第 12 期

    摘要：詳情怎樣規(guī)避地獄作者先介紹什么是地獄，以及在開發(fā)過程中怎樣去規(guī)避地獄，一時爽性能問題火葬場。詳情其他亮點匯總開發(fā)者大會已于北京時間月日凌晨在美國山景城正式啟幕。 【前端】 1. JavaScript 的新數(shù)據(jù)類型：BigInt BigInt?是 JavaScript 中的一個新的數(shù)字基本(primitive)類型，可以用任意精度表示整數(shù)。使用?BigInt?可以安全地存儲和操作大整數(shù)，...

    zzbo 評論0 收藏0

發(fā)表評論

0條評論

kevin

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<