Fork me on GitHub

react native 问题汇总

目录

一、static getDerivedStateFromProps

作为被废弃的componentWillReceiveProps的替代,React提供了一个新的函数static getDerivedStateFromProps(nextProps, prevState)

注意前面的static,这意味着在这个函数中我们不能使用this, 该函数的返回值将用于更新state。如果不需要更新state,就返回null

1
2
3
4
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.text === prevState.text) return null;
return { text: nextProps.text }; // 相当于setState({ text: nextProps.text });
}

二、16.3 生命周期相关改动

为了支持未来的异步渲染特性,以下生命周期函数将被废弃

  • componentWillMount 请使用 componentDidMount代替
  • componentWillUpdate 请使用 componentDidUpdate代替
  • componentWillReceiveProps 请使用新增的 static getDerivedStateFromProps代替
    废弃警告会在React 16.4开启,废弃的函数预计在React 17.0移除
1
2
3
4
5
6
7
8
9
10
11
12
// componentWillMount 请使用 componentDidMount代替 替换实例
componentWillUpdate(nextProps, nextState) {
foo(nextProps, nextState);
bar(this.props, this.state);
nextProps.a === this.props.a;
}
componentDidUpdate(prevProps, prevState) {
foo(this.props, this.state);
bar(prevProps, prevState);
this.props.a === prevProps.a;
}

详细介绍请见:去哪儿.我爱你/React-16-3-新特性


三、react native debug模式加载100%之后空白页

  1. "GET /debuggerWorker.js HTTP/1.1"的问题是由于我chrome的问题无法自动打开http://localhost:8081/debugger-ui的页面导致的。
  2. Downloading JavaScript bundle 100%加载之后一直空白页尝试了多次一直都这样。
    最后我通过使用官方的react native debugger工具成功debug了

四、Module does not exist in the module map

error: bundling failed: Error: Unable to resolve module react/lib/ReactPropTypeLocations from /Users/lee.guo/qunar.com/mobile/opsapp-rn/src/qrnControl/react-native-fence-html/HTMLStyles.js: Module does not exist in the module map

出现Module does not exist in the module map问题都是找不到module导致的, 检查下路径就能解决

五、ReactPropTypeLocations 找不到

1
2
// if (styleProps[key](testStyle, key, '', ReactPropTypeLocations.prop)) {
if (styleProps[key](testStyle, key, '', 'prop')) {

六、Invariant Violation: Calling PropTypes validators directly is not supported by the prop-types package. Use PropTypes.checkPropTypes() to call them.

Read more at http://fb.me/use-check-prop-types

谢谢您给我买糖吃~