【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。
属性的类型检查 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..
2、代码段
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是锁定横向
投递深圳同为数码等公司10个岗位