Не может размываться из FormInput при нажатии за пределами текстового поля - PullRequest
0 голосов
/ 07 февраля 2019

У меня есть короткая форма, в которой есть два поля FormInput (из response-native-elements).Я пытался использовать несколько методов, чтобы убрать фокус (и скрыть клавиатуру) при касании в любом месте экрана за пределами ввода текста.

  <View style={{flex:1}}>
  <ScrollView keyboardShouldPersistTaps="handled">
    <FormInput
        placeholder='Phone Number'
        errorStyle={{ color: 'red' }}
        inputStyle={{ color: 'white', fontSize: 20, fontFamily: 'Roboto-Thin', borderBottomColor: 'transparent'}}
        placeholderTextColor='white'
        onChangeText = {this.onPhoneChange.bind(this)}
        containerStyle = {{ borderBottomWidth: 1, borderBottomColor: '#4DB1AD', width: '90%'}}
        keyboardType='numeric'
        maxLength={10}
    />
    </ScrollView>
    </View>

Я также пытался

  <TouchableWithoutFeedback style={{flex: 1}} onPress={Keyboard.dismiss} accessible={false}>
  <View>
    <FormInput
        placeholder='Phone Number'
        errorStyle={{ color: 'red' }}
        inputStyle={{ color: 'white', fontSize: 20, fontFamily: 'Roboto-Thin', borderBottomColor: 'transparent'}}
        placeholderTextColor='white'
        onChangeText = {this.onPhoneChange.bind(this)}
        containerStyle = {{ borderBottomWidth: 1, borderBottomColor: '#4DB1AD', width: '90%'}}
        keyboardType='numeric'
        maxLength={10}
        onSubmitEditing={Keyboard.dismiss}
        onBlur={Keyboard.dismiss}
        blurOnSubmit={true}
    />
    </View>
    </TouchableWithoutFeedback>

и этот метод

  <TouchableOpacity activeOpacity={1} onPress={() => Keyboard.dismiss()}>
    <FormInput
        placeholder='Phone Number'
        errorStyle={{ color: 'red' }}
        inputStyle={{ color: 'white', fontSize: 20, fontFamily: 'Roboto-Thin', borderBottomColor: 'transparent'}}
        placeholderTextColor='white'
        onChangeText = {this.onPhoneChange.bind(this)}
        containerStyle = {{ borderBottomWidth: 1, borderBottomColor: '#4DB1AD', width: '90%'}}
        keyboardType='numeric'
        maxLength={10}
    />
    </TouchableOpacity>

К сожалению, ни одно из этих решений не помогло мне.

...