【React Native】日常踩坑記錄_以后將持續更新

　　作為一名有理想、有抱負的一代iOS程序員，本着“我頭發夠多，還能學”的原則，我選擇了追隨那些大佬的腳步，於2018年開始了React Native。

　　第一步：找文檔、准備安裝開發環境；

　　第二步：一步步跟着大佬的腳步，去輸入命令安裝（錯了，是復制、粘貼）；

　　第三步：哇!🤩好順利，竟然完成了（不過這是第幾次才成功的，我忘記了，安裝的樂趣，你們不安裝，你不會懂）。

　　滿懷信心的打開了，這一刻好有成就感，感覺自己距離大前端又近了一步，少年，你可以的，繼續加油！

　　

　　react native開發第一步，就是踩坑，一步一坑。記錄一下：

 

1、日常踩坑記錄　　

　　Q:Invariant Violation:Text strings must be rendered within a <Text> component

　　A:在代碼中無語中多輸入了符號,注意：此類問題，在提示中一般給出了第N行錯誤的提示。

 

　　Q:使用 PropTypes 進行類型檢 || 控制台報:TypeError: Cannot read property 'string' of undefined

　　A:注意： 從 React v15.5 開始 ，React.PropTypes 助手函數已被棄用，我們建議使用 prop-types 庫 來定義contextTypes。

 

　　import React, {Component,PropTypes} from 'react’;//已經不能使用了,

　　所以在使用前：

　　

　　

屬性的類型檢查
static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    sex: PropTypes.string.isRequired,
  }

 

　　

　　Q:Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

 

　　A:導入組件的方式由require換成import..from..

 

　　如：import Main from './Component/Main/Main.js';

 

　　

2、代碼段

　　1、 監聽網狀連接狀態的變化

componentDidMount () {
    NetInfo.addEventListener('change', this.handleConnectivityChange);
  }

  componentWillUnmount() {
    NetInfo.removeEventListener('change', this.handleConnectivityChange);
  }

  handleConnectivityChange() {
    NetInfo.isConnected.fetch().then(netConnected => {
      if (netConnected) {
        ToastAndroid.show('網絡已連接', ToastAndroid.SHORT, ToastAndroid.BOTTOM)
      } else {
        ToastAndroid.show('請檢查網絡連接', ToastAndroid.SHORT, ToastAndroid.BOTTOM)
      }
    })
  }

　　2、createStackNavigator, createBottomTabNavigator 路由嵌套 StackNavigator的跳轉問題

class MainView extends Component {
  static navigationOptions = {
    header: null
  };

  render () {
    let { isMask } = this.props.global
    const { cartCount } = this.props
    return (
      
        
      
    )
  }
}
MainView.router = AppTabNavigator.router

　　3、tabBarOnPress 攔截tab導航的tab點擊事件

navigationOptions: ({navigation, screenProps}) => ({
      title: '我的',
      tabBarIcon: ({focused}) => (
        
      ),
      tabBarOnPress: () => {
        if (!screenProps.netConnected) {
          navigation.navigate('Home')
        }
      }
    })

　　4、解決鎖定屏幕方向 還有鍵盤頂起tab導航等問題

添加一行：android:screenOrientation="portrait"
設置為portrait是鎖定豎向，landscape是鎖定橫向