react-native componentWillUpdate, componentWillReceiveProps - 警告

Question

本机反应 (componentWillUpdate, componentWillReceiveProps)

刷卡功能应用

警告：componentWillReceiveProps 已弃用，将在下一个主要版本中删除。请改用静态 getDerivedStateFromProps。
警告：componentWillUpdate 已弃用，将在下一个主要版本中删除。请改用 componentDidUpdate。作为临时解决方法，您可以重命名为 UNSAFE_componentWillUpdate.

不需要YellowBox.ignoreWarnings方法。

我会请你更新代码。

我该如何解决？

//git component
const renderPagination = (index, total, context) => {

  return (
    <View style={styles.paginationStyle}>
      <Text style={{ color: 'grey' }}>
        <Text style={styles.paginationText}>{index + 1}</Text>/{total}
      </Text>
    </View>
  )
}

export default class App extends Component {

  constructor(props) {

    super(props);

    this.onPressNext = this.onPressNext.bind(this);
    this.onPressPrev = this.onPressPrev.bind(this);

    this.state = {
      indexPage: 0
    }
  }


  onPressPrev = () => {

    const { indexPage } = this.state;

    if (indexPage > 0) {
      this.refs.swiper.scrollBy(-1);
    }
  }

  onPressNext = () => {

    const { indexPage } = this.state;

    if (indexPage < 4) {
      this.refs.swiper.scrollBy(1);
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{flex:0.1, backgroundColor: 'green'}}>
          <Text>NAVTEX</Text>
        </View>

        {/* {git component} */}
        <Swiper
          style={styles.wrapper}
          onIndexChanged={indexPage => this.setState({ indexPage })}
          renderPagination={renderPagination}
          showsButtons={false}
          loop={false}
          ref={'swiper'}
        >

          <View style={styles.slide}>
            <Text style={styles.text}>2</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>2</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>3</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>4</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>5</Text>
          </View>
        </Swiper>

        <View style={styles.buttoncontainer}>
          <Button
            style={{with:75}}
            onPress={this.onPressPrev}
            title="Previous">
          </Button>
          <Button
            onPress={this.onPressNext}
            title="Next">
          </Button>
        </View>
      </View>
    );
  }
}

Answer 1

我似乎还不能发表评论，所以我就把这个答案留在这里。我有同样的问题。正如您在 hongs 回答的评论中提到的，您没有使用 componentWillUpdate 和 componentWillReceiveProps 但您安装的模块之一可能正在使用它们。在我的例子中是 react-moment 或 momentjs 使用了 componentWillUpdate。同样如上所述，它将在下一个即将到来的主要更新中从 react-native 中删除，因此强烈建议使用替代品。

或者您可以禁用警告框。但是不建议在开发环境上这样做。如果你愿意，你可以通过将这个 console.disableYellowBox = true; 放在你的根组件中来禁用警告。

附带说明一下，请将所有样式移到样式表上，而不是内联样式，因为稍后再次更改会很麻烦。

快乐编码:)

更新： 正如您所提到的，您使用了 react-native-swiper，而且它确实同时使用了 componentWillReceiveProps 和 componentWillUpdate。如此处所示。

on line 199: componentWillReceiveProps(nextProps) on line 217: componentWillUpdate(nextProps, nextState)

是的，只要您不使用这些方法，您的代码就没有问题。请使用更新的方法。至于 react-native-swiper，开发人员可能会在下一个主要更新删除之前对其进行更新，因此您可以在下一个主要版本上执行 npm update 并检查。

Answer 2

警告不是由您的代码引起的。它是由 react-native-swiper 库引起的。我在 GitHub 上查看了他们的代码，在第 199 行的 src/index.js 文件中，他们调用了 componentWillReceiveProps()。这不是您需要担心的事情，是库维护者的责任。

Screenshot of search on GitHub

react-native componentWillUpdate, componentWillReceiveProps - 警告

react-native componentWillUpdate, componentWillReceiveProps - Warning

react-native

react-lifecycle