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 answer的评论中提到的那样，您尚未使用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-警告

2 个答案: