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

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

Screenshot of search on GitHub

Answer 2

我似乎还不能发表评论，所以我将把这个答案留在这里。我有同样的问题。正如您在 hongs 的 cmets 答案中提到的，您没有使用过 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 并检查。