【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是锁定横向
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期