商譽專題RN及H5項目總結

React（基礎框架）： React 是基礎框架，是一套基礎設計實現理念，開發者不能直接使用它來開發移動應用或者網頁。

React.js（web網頁開發）：在React框架之上，發展出了React.js 框架來開發網頁。

React Native（移動端應用）：在React框架之上，延伸的一個移動應用程序開發框架。

 

1、react和react-native樣式區別

1.在reactjs中的樣式，一種是樣式須要外部引入css文件，引用樣式的方式是在html中的link標籤引入；第二種是在js文件中引入，這種方式須要使用css-loader和style-loader 

style-loader 可以在須要載入的html中建立一個<style></style>標籤，標籤裏的內容就是CSS內

npm install style-loader -D

 

css-loader 是容許在js中import一個css文件，會將css文件當成一個模塊引入到js文件中。

npm install css-loader -D

import "./style.css";//引入css文件
class App extends Component {
    render(){
        return (
            <div className = "container"></div>
        );//使用className代替class
    }
}

第三種是定義樣式對象

在html中行內樣式寫法：<span style="font-size: 12px; color: #333;">文本</span >

在react中要插入行內樣式，須要CSS 屬性變成一個對象再傳給元素： <span style={{fontSize: 12px; color: #333;}}>文本</span>

 style 接受一個對象，這個對象裏面是這個元素的 CSS 屬性鍵值對，原來 CSS 屬性中帶 - 的元素都必需要去掉 - 換成駝峯命名，如 font-size 換成 fontSize，text-align 換成 textAlign

 

2.在react-native中的樣式，有兩種，一種是內聯樣式對象；一種是定義樣式對象，這個樣式是寫在js文件中；兩種方式都是以對象的方式來定義樣式。

使用style屬性來代替class處理樣式

export default class App extends Component{
    render(){
        return (
            <View style={[css.container,css.box]}>
               <Text style={css.textBox}>測試例子</Text>
           </View>
        )//使用style
    }
}

const css= {
    container:{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
    },
    box:{
       justifyContent: 'flex-start'
    },
    textBox:{
        color:"red",
        fontSize: 16,
        textAlign: "center",
    }
}    

對比樣式屬性：reactjs開發的h5項目可使用css2，css3全部屬性。可是react native屬性受限，可用樣式參考 https://github.com/doyoe/react-native-stylesheet-guide

動畫實現，react native提供 Animated，從實現難以程度，靈活性來看，明顯較複雜些。

 

總結：使用樣式對象的方式都需將樣式屬性 採用駝峯式寫法（js引入）。reactjs最終渲染成 css行內定義樣式寫法。

不一樣的是 

在react、react native 中使用style對象的方式時，值必須用雙引號包裹起來。可是屬性值有些差異

import React, { Component } from "react";

const divStyle = {
  width: "300px",
  margin: "30px 50rpx",
  backgroundColor: "#44014C",  //駝峯法
  minHeight: "200px",
  boxSizing: "border-box"
};

class App extends Component {
  constructor(props, context) {
    super(props);
  }
  render() {
    return (
     <div>
       <div style={divStyle }>我是文字</div>
     </div>
    );
  }
}

export default App

　　

 可是在react-native中樣式

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet
} from "react-native";
export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <View>
        <Text style={css.divStyle}></Text >
      </View>
    );
  }
}

const css = StyleSheet.create({
  divStyle: { 
    width: 300,
    /* margin: "30px 50rpx",*/
    marginHorizontal:50,
    marginVertical:30,
    backgroundColor: "#44014C",  //駝峯法
    /* minHeight: "200px",*/
    /* boxSizing: "border-box"   無boxSizing屬性  */
  }
}

多個style對象合併

style={{...firstStyle, ...secondStyle}}   或 style={Object.assign({},firstStyle,secondStyle)}

style={[firstStyle,secondStyle]} 

 

2、界面view層

  ReactJs和React Native的原理是相同的，都是由js實現的虛擬dom來驅動界面view層渲染，可是渲染方式不一樣。

  ReactJs是驅動html dom渲染；咱們可使用html標籤，甚至建立更多的自定義組件標籤，內部綁定事件；

  React Native 不是使用HTML來渲染App（不是渲染在HTML頁面中），框架自己提供了可代替它的相似組件。這些組件映射到渲染到App中的真正的原生iOS和Android UI組件（驅動android/ios原生組件渲染） 。

舉例

react native寫法

<TouchableWithoutFeedback onPress={this.pressEvent}>
   <View style={css.loadMore}>
        <Text style={[css.loadText,css.loadMore]}>{text}</Text>
   </View> 
</TouchableWithoutFeedback>

    react native提供的View組件不可點擊 ， 可以使用 Touchable 的方式來實現用戶點擊事件的包裝

reactjs寫法

<div onClick={() => this.onClick()}>
     <div className="loadMore">
          <span className="loadText loadMore">{text}</span>
      </div>
</div>

3、路由

目前react native項目中使用的react-navigation

reactjs路由react-router-dom 

reactjs路由配置

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';

import home from "../views/Home";
import detail from "../views/Detail";


export default class RouteConfig extends Component{
  render(){
    return(
      <Router>
        <Switch>
          <Route path="/" exact component={home} />
          <Route path="/home" component={home} />
          <Route path="/detail" component={detail }  />
          <Redirect to="/" />
        </Switch>
      </Router>
    )
  }
}

　react native路由配置

'use strict';

import React, { Component } from 'react';
import { Easing, Animated,NativeModules } from 'react-native';

import { createStackNavigator } from 'react-navigation';

import Home from './pages/Home';
import Detail from './pages/Detail';

let  initialRouteName, MainStack;

export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = {

    }
    initialRouteName = props.page || 'Home'
    
    MainStack = createStackNavigator(
      {
        Home: {
          screen: Home
        },
        Detail: {
          screen: Detail
        }
      }
    );
  }
  async componentWillMount(){

 }
 render() {
   // rootProps 啓動參數
   let rootProps = this.props
   return (
     <MainStack screenProps={{ rootProps: rootProps}} />
   )
 }
};

　　

4、跨域

跨域，是指瀏覽器不能執行其餘網站的腳本。它是由瀏覽器的同源策略形成的，是瀏覽器對JavaScript實施的安全限制。

   同源（域名、協議、端口均爲相同）策略限制了一下行爲：

• Cookie、LocalStorage 和 IndexDB 沒法讀取
• DOM 和 JS 對象沒法獲取
• Ajax請求發送不出去

 

react native項目不是基於瀏覽器端，所以不存在跨域的問題。可是針對h5頁面，則會出現跨域。

 

解決跨域

① jsonp跨域 https://www.npmjs.com/package/jsonp

npm install jsonp -S

在html頁面中經過相應的標籤從不一樣域名下加載靜態資源文件是被瀏覽器容許的，因此，，咱們常見的作法是動態的建立script標籤，再去請求一個帶參網址來實現跨域通訊

//原生的實現方式
let script = document.createElement('script');
script.src = 'http://www.abc.com/api/getList?pageSize=1&pageNum=20&callback=callback';
document.body.appendChild(script);
function callback(res) {
  console.log(res);
}

jquery也支持jsonp的實現方式

$.ajax({
    url:'http://www.abc.com/api/getList',
    type:'GET',
    dataType:'jsonp',//請求方式爲jsonp
    jsonpCallback:'callback',
    data:{
        "pageSize":1,
        "pageNum":20
    }
})　

 

使用這種方式，咱們會發如今html頁面會增長script標籤，這種方式很好用，可是只能實現get請求 ，經過回調函數取得請求接口的數據。

②proxy代理跨域

https://www.npmjs.com/package/http-proxy-middleware

http-proxy-middleware用於後臺將請求轉發給其它服務器。

例如：咱們當前主機A爲http://localhost:3000/，如今瀏覽器發送一個請求，請求接口/api，這個請求的數據在另一臺服務器B上（http://www.abc.com:4000），這時，就可經過在A主機設置代理，直接將請求發送給B主機。

 安裝

npm install --D http-proxy-middleware

 

配置

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/api', {
      target: 'http://www.abc.com', // 目標服務器 host
      changeOrigin: true, // 默認false，是否須要改變原始主機頭爲目標URL
      pathRewrite: {  //重寫目標url路徑。
         '^/api': '/'    // 重寫請求，好比咱們源訪問的是api/，那麼請求會被解析爲 /
      } 
  }))
};

 

好比：某個接口路徑爲 http://www.abc.com/api/login

 

接口中的以 /api 會被替換爲 /  而且代理路徑爲 http://www.abc.com/login

測試看代理模式有沒有生效，只需看代理的路徑是否指向了本地。

 

相關連接 http://www.javashuo.com/article/p-phiwevcn-mp.html

參考連接：https://www.imooc.com/article/21976