Необходимо дважды нажать, чтобы освободить фокус ввода текста из модального с KeyboardAvoidingView - PullRequest
Новая
       12

Необходимо дважды нажать, чтобы освободить фокус ввода текста из модального с KeyboardAvoidingView

0 голосов
/ 02 июля 2019

У меня есть модальное обёртывание KeyboardAvoidingView, оборачивающее несколько анимированных компонентов. Одним из них является TextInput, а другим - кнопка. При нажатии на кнопку, клавиатура сначала скрывается, а затем нужно нажать еще раз, чтобы добраться до кнопки «onPress»

Изучил решение обернуть компоненты представлением с прокруткой и использовать prop keyboardShouldPersistTaps = {'always'}, но это не работает. 

  constructor(props) {
    super(props);
    this.paddingInput = new Animated.Value(0);
    this.state = {
        modalVisible: false,
        otherTip: '',
    }
}

  renderHoveringNote = () => {
    const {total, currentTipPercent} = this.props.rootStore.orderStore;
    return (
        <View>
            <KeyboardAvoidingView style={{flex: 1}}>
                <Animated.View style={{
                    marginBottom: this.paddingInput,
                    flex: 1
                }}>
                    <View>
                        <Text>Enter custom amount</Text>
                    </View>
                    <TextInput                  
                        onChangeText={value => {
                            this.setState({otherTip: value})
                        }}
                        autoFocus
                        value={this.state.otherTip}
                    />
                     <Button title='Save'
                      onPress={()=>{
                            ...do some stuff here
                            this.setState({modalVisible: false});
                            Keyboard.dismiss();
                 }}
                </Animated.View>

            </KeyboardAvoidingView>
        </View>
    )
};


  renderOtherTipModal = () => {
    return (
        <Modal
            isVisible={this.state.modalVisible}
           onBackdropPress{()=>this.setState({modalVisible:false})}
            style={{margin: 0, flex: 1}}
            hideModalContentWhileAnimating={true}
        >
            {this.renderHoveringNote()}
        </Modal>
    )
};

Один клик должен доходить до нажатия кнопки

1 Ответ

0 голосов
/ 05 июля 2019

Разобрался - у меня было несколько видов прокрутки в качестве родителей к модалу. Важно иметь ВСЕ родительские представления прокрутки, чтобы иметь keyboardShouldPersistTaps = {'always'}. После добавления это работало отлично.

...