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

坑.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';错误

推荐阅读更多精彩内容