react-native 所有的文字顯示必須用

<Text></Text>標(biāo)簽包裹

<Scrollview></Scrollview>頁面滾動(dòng)標(biāo)簽

• react-native與PC不同的的其中一點(diǎn)就是，如果高度高出屏幕高度不會(huì)自動(dòng)撐開，添加滾動(dòng)條
• 如果要想頁面滾動(dòng)<Scrollview>就需要添加這個(gè)標(biāo)簽
• 添加<Scrollview>須要指定高寬，不然不會(huì)生效
• 如果<Scrollview>外層標(biāo)簽已指定高寬，則可以給定flex:1屬性(官網(wǎng)默認(rèn)推薦)

<Scrollview></Scrollview>標(biāo)簽如果里面還嵌套有另外一個(gè)同樣的標(biāo)簽，默認(rèn)內(nèi)部的是不會(huì)滾動(dòng)的

• 如果想要外部?jī)?nèi)部的<Scrollview></Scrollview>都生效
• 外部scollview設(shè)置scrollEnabled={this.state.scoll}
• 然后在內(nèi)部scollview里面的點(diǎn)擊函數(shù)加上，onPressIn和onPressOut操作
• onPressIn時(shí)設(shè)置scoll為false，這樣外部scollview就不能滑動(dòng)了，內(nèi)部scollview就能滑動(dòng)了。
• onPressOut時(shí)則設(shè)置scoll為true 這樣就解決了內(nèi)外部的滾動(dòng)沖突問題

• react-native里面如果要實(shí)現(xiàn)陰影效果IOS默認(rèn)是可以通過樣式實(shí)現(xiàn)，但是Android要實(shí)現(xiàn)需要添加

elevation:(number)

margin或者padding屬性，不能像寫css那樣直接寫多個(gè)值

• marginVertical 同時(shí)設(shè)置marginTop和marginBottom。
• marginHorizontal 同時(shí)設(shè)置marginLeft和marginRight。
• padding也是同樣的

在App里面，一般有啟動(dòng)圖，引導(dǎo)頁，注冊(cè)頁，但是一般引導(dǎo)頁，跟注冊(cè)頁，默認(rèn)是不能返回的，在react-navigation組件中要實(shí)現(xiàn)不能返回的頁面有兩種辦法

//替換當(dāng)前路由
this.props.navigation.replace('被替換的路由’)

//重置路由
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);

在組件或其他沒有props的地方調(diào)用路由跳轉(zhuǎn)

• 創(chuàng)建一個(gè)NavigationService.js的文件，里面封裝路由的一些方法
• 在根目錄通過ref屬性，拿到路由的實(shí)例

import { NavigationActions } from 'react-navigation';

let _navigator;
//通過ref屬性拿到路由的實(shí)例
function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}
function back(key){
  _navigator.dispatch(
    NavigationActions.back({
      key
    })
  )
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
  back
};

import React, { Component } from 'react';
import StackNavigator from './src/router/StackNavigation/StackNavigation';
import { StatusBar, SafeAreaView,} from 'react-native'
import { createAppContainer } from 'react-navigation';
import NavigationService from './src/utlis/NavigationService';

const Navigator = createAppContainer(StackNavigator);

export default class App extends Component {
  /**
   * SafeAreaView避免文字顯示在像iPhone X那樣的劉海位置
   * StatusBar全面屏手機(jī)沉浸式頂部實(shí)現(xiàn)
   * Navigator全局路由分發(fā)，實(shí)現(xiàn)未注冊(cè)的組件也可以調(diào)用路由方法
   */
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <StatusBar backgroundColor={'#DB3F40'} />
        <Navigator
          ref={navigatorRef => {
            NavigationService.setTopLevelNavigator(navigatorRef);
          }}
        />
        <Loading ref={(loading) => { global.loading = loading }}></Loading>
        <Toast ref={(toast) => { global.toast = toast }}></Toast>
      </SafeAreaView>
    )
  }

}

禁用全局console的輸出

if (!__DEV__) {
  global.console = {
    info: () => {},
    log: () => {},
    warn: () => {},
    debug: () => {},
    error: () => {}
  };
}

• React Native 中有一個(gè)全局變量DEV用于指示當(dāng)前運(yùn)行環(huán)境是否是開發(fā)環(huán)境。我們可以據(jù)此在正式環(huán)境中替換掉系統(tǒng)原先的 console 實(shí)現(xiàn)。
• 這樣在打包發(fā)布時(shí)，所有的控制臺(tái)語句就會(huì)被自動(dòng)替換為空函數(shù)，而在調(diào)試時(shí)它們?nèi)匀粫?huì)被正常調(diào)用。

繞過校驗(yàn)https

android/bulid.gradle

//targetSdkVersion 的版本號(hào)改到26就可以
ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28  //  =>26
        supportLibVersion = "28.0.0"
    }

總結(jié)使用中遇到的一些問題，以及解決辦法，如有寫的不正確的，還請(qǐng)指正