React-Native: ScrollView, refs и пользовательские компоненты

Question

Я пытаюсь понять, как сделать 2 вещи в 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: как у меня «ребенок» (MyCustomComponent) компонент вызова метода, который реализуется на родительском компоненте (MainView). Причина этого в том, что у меня есть куча немного разных «MyCustomComponents», и я не хочу реализовывать один и тот же шаблонный код для прокрутки во всех них.

Answer 1

Для вопроса 2: Подход, который я использую, заключается в передаче метода в реквизиты вашего дочернего компонента и его вызове при необходимости.

Answer 2

Благодаря @ yang-lei для указания меня в одном направлении. Вот то, что я в конечном итоге делает:

Для компонента 'ребенок' в компоненте 'родительского', принятый в функции:

<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); 
}