總結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,通過alignItemsjustifyContent實現

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

關於TouchableHighlightTouchableOpacity區別

  • 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實現,

第三方組件

輪播圖

電話,短信,郵件

下拉選擇框

學習資料
- RN官方文檔

常用命令

  • 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

學到新知識後續繼續更新

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章