0

react-native (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>
    );
  }
}
4

2 回答 2

0

我似乎还不能发表评论，所以我将把这个答案留在这里。我有同样的问题。正如您在 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在下一次主要版本中进行检查并检查。

于 2019-08-12T03:27:31.270 回答
0

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

GitHub上搜索的截图

于 2019-08-12T04:04:39.563 回答