Question

我创建了一个滚动视图，该视图呈现动态表单元素。我可以为每个滚动视图的动态子级创建“ ref”。但是我面临的问题是我想滚动到表单中存在验证错误的确切子级。但是我找不到每个孩子相对于滚动视图的实际位置，因此我可以滚动到该元素。

我尝试将onLayout方法添加到子组件中，但是它在加载时仅返回一次位置，即使滚动后该值也保持不变。

我的滚动视图

<ScrollView style={{marginBottom: 55}} ref={(ref) => { this.formScrollList = ref; }}>
  {this.state.formElements.map((element, i) => {
    return (
      <TextboxInput quesNo={element.key + 1} required={element.required} error={this.state.errors[element.question_id]} quesType={element.type} quesId={element.question_id} placeholder={element.placeholder} onChangeHandler={this.onChangeHandler} label={element.label} defaultValue={this.state.answers[element.question_id]} showRequired={this.showRequired} index={element.index}/>
    )
  })}
</ScrollView>

我的TextboxInput子级

const TextboxInput = (props) => (
    <View style={styles.inputContainer} ref={setRef}>
        <Text style={styles.text}>{props.label || "Textbox"}{props.showRequired(props.required)}</Text>
        <TextInput style={[styles.textInput, props.error === "empty" ? {borderWidth: 1, borderColor: "red"} : null]} {...props} onChangeText={props.onChangeHandler.bind(this, props.quesId, props.quesType, props.index)} placeholder={props.placeholder} underlineColorAndroid="transparent" defaultValue={props.defaultValue}/>
    </View>
)

我想滚动到表单中存在验证错误的确切子项。

Answer 1

使用scrollview组件的scrollTo方法。

滚动到react-native scrollview动态子级

1 个答案: