React Native 中 ViewPager 中子组件的 React createRef

Question

我在我的 react 本机应用程序中创建了一个包含三个步骤的注册模块，其中我将所有字段放在父组件的 state 中，这给了我一个非常重载的 JSX 文件，所以我试图移动所有字段验证功能到相关步骤并在父屏幕中捕获返回的值“有效/无效”，因此我可以通过单击将导航到下一个查看器页面的下一步按钮移动到下一步。

所以我尝试使用 React.createRef 来引用父级中的子步骤，并在将来调用子级中的方法：

SignupScreen.jsx（父）：

constructor(props) {
    super(props);

    this.state = {
    ...fields,
    }
    this.signupStepOneRef = React.createRef();
  }
  render(){
  return (  
          <ViewPager
            initialPage={0}
            style={styles.fieldsContainer}
            scrollEnabled={false}
            ref={(vp) => (this.viewPager = vp)}
          >
                <SignupStepOne
                  fieldsContainerStyle={styles.fieldsContainer}
                  scrollViewStyle={styles.scrollView}
                  key="1"
                  onInputChanged={this.handleChange}
                  stepOneErrors={this.state.stepOneErrors}
                  ref={this.signupStepOneRef}
                />
                ...OtherSteps
         </ViewPage>
) 
     }

但是当我 console.log(this.signupStepOneRef) 时，这段代码给了我一个 Object: {current: null}。 官方文档说，如果孩子是 function，这将不起作用，但将其更改为 class 组件也无济于事。 我也尝试过：

ref={(obj) => this.signupStepOneRef = obj}

语法，但也给了我相同的 null 当前 object。

Answer 1

我终于找到了解决方案，因为无法直接引用 viewpager 子页面，所以我将子页面包装在 View 组件中，这解决了我的问题。 解决方案代码：

        <ViewPager
        initialPage={0}
        style={styles.fieldsContainer}
        scrollEnabled={false}
        ref={(vp) => (this.viewPager = vp)}
        >
            <View key="1">
            <SignupStepOne
              fieldsContainerStyle={styles.fieldsContainer}
              scrollViewStyle={styles.scrollView}         
              onInputChanged={this.handleChange}
              stepOneErrors={this.state.stepOneErrors}
              ref={this.signupStepOneRef}
            />
            </View>
            ...OtherSteps
     </ViewPage>

关键属性需要移动到包装视图。