Question

我试图了解如何在React-Native中做两件事。

问题1：我有一个组件和另一个自定义组件，我需要在ScrollView中滚动。

问题在于，我太过新的反应原生，无法理解我的孩子的生活方式。组件我可以访问scrollview。注意：如果我不使用自定义组件并将所有内容放入MainView组件中，则代码可以正常工作。

以下是代码的基础知识：

class MainView extends React.Component{
  render() {
    return (
    <ScrollView ref='scrollView'>
      <MyCustomComponent />
    </ScrollView>
    )
  }
}


class MyCustomComponent extends React.Component{

  inputFocused(refName) {
    setTimeout(() => {
      let scrollResponder = this.refs.scrollView.getScrollResponder();
      scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
        React.findNodeHandle(this.refs[refName]),
        110, //additionalOffset
        true
      );
    }, 50);
  }

  render() {
    return (
    <TextInput ref='fieldtitle'
      onFocus={this.inputFocused.bind(this, 'fieldtitle')}
      />

    )
  }

}

问题2：我怎样才能让我的孩子＆＃39; （MyCustomComponent）组件调用在父组件（MainView）上实现的方法。这样做的原因是我有一堆略有不同的＆＃39; MyCustomComponents＆＃39;而且我不想实现相同的样板代码来滚动所有这些代码。

Answer 1

问题2：我使用的方法是将方法传递给子组件的props，并在需要时调用它。

Answer 2

感谢@ yang-lei指点我的方向。这就是我最终做的事情：

对于'parent'组件中的'child'组件，传入一个函数：

<MyCustomComponent onFocusFunction={this.gainFocus.bind(this)} onDismissFunction={this.dismissFocus.bind(this)} />

在MyCustomComponent中：

inputFocused(refName) {
  this.props.onFocusFunction(this, refName)
}

dismissFocus(refName) {
  this.props.onDismissFunction(this, refName)
}

render() {

  var field = this.props.fieldInfo;
  placeholder = field.placeholder ? field.placeholder : ""

  return (
    <View style={styles.inputRow}>
    <Text style={styles.textField}>{this.props.fieldInfo.title}</Text>
    <TextInput ref={field.title}
      style={styles.textInput}
      onChange={this.handleChange.bind(this)}
      keyboardType='email-address'
      placeholder={placeholder}
      onFocus={this.inputFocused.bind(this, field.title)}
      onBlur={this.dismissFocus.bind(this, field.title)}
      />
    </View>
  )
}

在'父母'组件中：

gainFocus(view, refName) {
  setTimeout(() => {
    let scrollResponder = this.refs.scrollView.getScrollResponder();
    scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
      React.findNodeHandle(view.refs[refName]),
      110, //additionalOffset
      true
    );
  }, 0);
}

dismissFocus(view, refName) {
  setTimeout(() => {
    let scrollResponder = this.refs.scrollView.getScrollResponder();
    scrollResponder.scrollResponderScrollTo(
    )
  }, 0);
}

React-Native：ScrollView，refs和自定义组件

2 个答案: