React Native报错: undefined is not

作者: 光强_上海 | 来源:发表于2017-11-05 17:33 被阅读191次

    最近在RN开发交流群中发现很多同学们会问下面的报错是什么情况,感觉自己的代码语法各方面都没有写错啊,怎么运行项目就报错尼,一头雾水不知道什么情况。作者在前段时间开发时也是遇到这个问题,后面找到了问题的所在,在这就解决方案分享给大家。

    error

    示例代码:

    /**
     * keyboardManagerDemo
     * 作者Git:https://github.com/guangqiang-liu
     * 技术交流群:620792950
     * 作者QQ:1126756952
     * Created by guangqiang on 2017/11/5.
     */
    
    import React, { Component, PropTypes} from 'react'
    import {
      StyleSheet,
      Text,
      View,
      TextInput,
    } from 'react-native'
    
    export default class App extends Component<{}> {
    
      render() {
        const {name} = this.props
        return (
          <View style={styles.container}>
            <Text style={{flex: 1, marginTop: 100}}>{name}</Text>
            <TextInput
              style={{height: 40, borderWidth: 1, borderColor: 'red', marginBottom: 20, width: 200}}
              underlineColorAndroid='transparent'
              placeholder={'我是TextInput组件'}/>
          </View>
        )
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
      }
    })
    
    App.propTypes = {
      name: PropTypes.string.isRequired
    }
    

    根据报错提示,错误锁定在这行代码上name: PropTypes.string.isRequired,然后Google出答案,发现是React的版本升级导致的。

    • 在React 15.5.0 之后的版本中,将PropTypes从React库中废除掉了,当我们需要使用PropTypes时,我们需从prop-types中导出PropTypes即可。
      import PropTypes from 'prop-types'

    错误总结

    在React 15.5.0 之后的版本,我们就不要再已这种方式导出PropTypes了import React, { Component, PropTypes} from 'react'
    更换为:import PropTypes from 'prop-types',安装prop-types库 npm install prop-types --save

    当我们 执行 npm start 时,报如下的错误,这时我们需要注意

    • 是否成功开启了服务
    • iOS的ATS是否配置
    image

    iOS在info.plist中配置ATS如下

    image

    福利时间

    • 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发):https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
    • 作者简书主页:包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们:多多关注多多点赞)
    • 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
    • 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢支持!

    相关文章

      网友评论

        本文标题:React Native报错: undefined is not

        本文链接:https://www.haomeiwen.com/subject/pfkhmxtx.html