美文网首页reactReact Native
我在react native踩过的坑(持续更新...)

我在react native踩过的坑(持续更新...)

作者: 阿波罗程序猿 | 来源:发表于2016-08-29 11:00 被阅读10839次

    坑.js

    • 1.对于对css没经验和js没经验的同学,在看FB提供的组件文档时,把组件写在了view上,但是为什么没有在模拟器中渲染出来呢?并且没有报错。

    对于这样的情况,请设置高度和宽度

    • 2.当从github新download下来一个项目,并运行react-native run-ios命令时,报React Native: Command run-ios unrecognized

    1.第一步:
    npm install --save react-native@latest
    2.第二步:
    nam install

    • 3.ExceptionsManager.js:76 Warning: You are manually calling a React.PropTypes validation function for the marginHorizontal prop on StyleSheet breadItem. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library.当报出这个类错误的时候,是因为你的react版本错误。就目前看react native需要的react版本是15.2.1的。(react native 0.32版本的需要react 15.3.1的支持了)

    npm install --save react@15.2.1

    • 4.Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount。当报这类错误时,说明你的props和states在渲染的时候更改了。

    大体意思就是在render这种需要props和state进行渲染的方法中,不能再对props和state进行更新。我的理解是,React会在props和state改变的时候调用 render进行DOM diff然后渲染,如果在渲染过程中再对props和states进行更改,就陷入死循环了。
    例如:
    <Button onPress={hideMessage('隐藏信息')}>隐藏信息</Button>
    当点击button时,就会报上述错误,因为这样会在渲染是更改组件的状态。
    解决方法:
    在调用方法时创建一个匿名函数,再调用。
    <Button onPress={()=>{hideMessage('隐藏信息')}}>隐藏信息</Button>

    • 5.组件<Image source={...} /> 当图像资源来自网络时不显示图片。

    当使用<Image />source属性时,从网络获取图片资源,要求设置图片的高度和宽度。FB react native文档上并没有提示这点。

    Application myExample has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent.

    error.png

    关闭上一个项目的React Packager控制台。之后再重新运行react-native run-ios

    • Expected a component class, got [object Object].

    导入的类必须是大写的
    import App from './src/app';正确
    import app from './src/app';错误

    相关文章

      网友评论

      本文标题:我在react native踩过的坑(持续更新...)

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