作为一名有理想、有抱负的一代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是锁定横向