總結ReactNative一些基礎知識

關鍵詞

• let和var的區別

function test() {
  var a = 1;
  if (true) {
    var a = 2;  // 同樣的變量!
    console.log(a);  // 2
  }
  console.log(a);  // 2
}

function test() {
  let a = 1;
  if (true) {
    let a = 2;  // 不同的變量
    console.log(a);  // 2
  }
  console.log(a);  // 1
}

var作用於當前申請方法的作用域，let作用於當前申請對象作用域

• props和state區別

props由父級設置，它們在組件的整個生命週期中都是固定的。對於將要改變的數據，我們必須使用state

可以這樣說：props指的是物體，state是物體的狀態

樣式

• flex：1

flex:1 填滿剩餘空間，類似Android中的layout_weight的屬性

• 實現兩個View重疊

{
  position: 'absolute',
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
}

組件

Flexbox

• flexDirection 佈局的主軸
• justifyContent 佈局沿主軸的對齊方式，可用的選項有
  
  1. flex-start 開始，
  2. center 中間，
  3. flex-end 項目被打包到結束行，物品均勻分佈在線上，
  4. space-around 周圍有相同的空間，
  5. space-between 中相同的空間間
• alignItems 佈局沿着輔助軸的對齊方式，
  
  1. start
  2. center
  3. flex-end
  4. stretch 彈性元素被在側軸方向被拉伸到與容器相同的高度或寬度

TextInput

<TextInput
              style={styles.numberInputStyle}
              placeholder={'請輸入正確的手機號碼'}
              maxLength={11}
              keybordNumber={'numberic'}
              onChangeText={(inputNum) => this.setState({inputNum})}
              />

大概醬紫，具體其他參數可查官網文檔

Image加載圖片

 /*<Image source={require('../image/index_phone.png')} style={styles.phone}/>*/
<Image source={require({item.image})} style={styles.phone}/>//使用錯誤

require的參數不能是變量。

原因：在打包腳本執行的時候圖片路徑就已經打包進去，所以不能用變量的形式。

Text控件水平居中

在Text外面包裹一層View,通過alignItems和justifyContent實現

Text組件使用百分比佈局會超出手機屏幕寬度

var dimensions = require('Dimensions');
var totalWidth = dimensions.get('window').width;

通過totalWidth指定Text組件的寬度！

對於有固定寬度的子組件是支持百分比的，無固定寬度不支持

webView組件

import React, { Component } from 'react';
import { WebView } from 'react-native';

class Web extends Component {
  render() {
    const { params } = this.props.navigation.state;
    return (
      <WebView
        source={{uri: params.url}}
      />
    );
  }
}

module.exports = Web

點擊事件

一個Button的點擊事件

<Button
  onPress={() => {
    Alert.alert('You tapped the button!');
  }}
  title="Press Me"
/>

Text組件點擊事件也類似，通過onPress實現

其他控件使用TouchableHighlight(只支持一個子節點)或者TouchableOpacity，Android的波紋效果使用TouchableNativeFeedback，不想要任何效果使用TouchableWithoutFeedback

關於TouchableHighlight和TouchableOpacity區別

• TouchableHighlight：在TouchableWithoutFeedback的基礎上添加了當按下時背景會變暗的效果。
• TouchableOpacity：相比TouchableHighlight在按下去會使背景變暗的效果，TouchableOpacity會在用戶手指按下時降低按鈕的透明度，而不會改變背景的顏色。

注意：

onPress={this._Handler()}//這樣寫_Handler方法就執行執行了,因爲這樣是把_Handler運行完返回的值給onPress了

需要這樣寫

onPress={()=> this._Handler()}//這種就是把onPress方法賦值給onPress

網絡

• 使用Fetch

fetch('https://mywebsite.com/mydata.json');

• POST請求

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

• 異步的方式請求

function getMoviesFromApiAsync() {
  return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}

也可以使用ES2017的asybc和await的用法

async function getMoviesFromApi() {
  try {
    let response = await fetch(
      'https://facebook.github.io/react-native/movies.json'
    );
    let responseJson = await response.json();
    return responseJson.movies;
  } catch (error) {
    console.error(error);
  }
}

傳值

A頁面

onPress={()=>{navigate('Web',{url:'https://www.baidu.com/index.php'})}


B頁面

const { params } = this.props.navigation.state;


params.url//獲取方式

功能

• 設置時間延時

 setInterval(() => {
      this.setState(previousState => {
        return { isShowingText: !previousState.isShowingText };
      });
    }, 1000);

• 撥打電話
  
  1. 第一種實現方式通過RN和源生交互，讓原生實現
  2. 第二種實現方式，通過RN的Linking提供的方法實現

 //撥打電話  
   linking=(url)=>{  
       console.log(url);  
       Linking.canOpenURL(url).then(supported => {  
           if (!supported) {  
               console.log('Can\'t handle url: ' + url);  
           } else {  
               return Linking.openURL(url);  
           }  
       }).catch(err => console.error('An error occurred', err));  

    } 

1. 通過第三方組件react-native-communications實現，

第三方組件

輪播圖

• react-native-swiper
• react-native-viewpager(目前API有問題2018年5月18日)

電話，短信，郵件

• react-native-communications

下拉選擇框

• react-native-modal-dropdown

學習資料
- RN官方文檔

• React Native 研究與實踐

• React-Native學習指南

• react-native-swiper的使用舉例

常用命令

• npm更新

npm install -g npm

• 夜神模擬器運行RN配置

行
nox_adb shell

在shell環境下執行getprop命令

找到dhcp.eth1.server對應的IP地址

[dhcp.eth1.server]: [172.17.100.2]

打開nox模擬器，確保已經將ReactNative APP安裝到模擬器上，
點擊模擬器的搖動按鈕，在對話框的DevSettings選項中，填入上面的IP地址和ReactNative默認的8081端口號

• 安裝第三方組件

npm i xxx --save

npm install xxx

學到新知識後續繼續更新