無法從React Native中的另一個類調用Method

Question

我有以下小吃設置（請使用Android版本）：

https://snack.expo.io/@sj458147/stackoverflow-unable-to-call-method

1. 單擊轉到步驟2時-我得到的undefined不是對象，則視圖應通過調用方法移動-moveToPage

2. 如果用戶要刷模態視圖，它將移至下一個視圖。 如何停止這種交互（僅當用戶單擊按鈕時才滾動視圖，而不能通過滑動）。

3. Expo給出了this.refs已棄用的消息，我將如何更新此代碼？

Answer 1

您需要在構造函數中使用React.createRef（）。 並在您的組件中使用此參考。 在go（）函數中，要實現moveToPage（2），您需要像下面這樣使用當前的引用；

class ShowModal2 extends Component {
  constructor(props){
    super(props);
    this.MyScrollView = React.createRef();
  }

  go = () => {
    this.MyScrollView.current.moveToPage(2);
  };

  render() {
    return (
      <Modal
        style={styles.modal}
        isVisible={true}
        onBackdropPress={this.hideModal}>
        <MyScrollView ref={this.MyScrollView}>
        ......

並將相同的方法應用於其他班級

class MyScrollView extends Component {
  constructor() {
    super();
    this.state = { page: '' }
    this.scrollView = React.createRef();
  }
  moveToPage(page) {
    this.scrollView.current.scrollTo({ x: ((page - 1) * device_width), y: 0, 
    animated: true });
    alert(page);
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView ref={this.scrollView} showsHorizontalScrollIndicator={false} horizontal={true} pagingEnabled={true}>
      ......

並從鏈接中檢查-> https://snack.expo.io/@sdkcy/stackoverflow-unable-to-call-method