Odrzucanie klawiatury w wielowierszowej wtyczce TextInput w React native

Question

Gdy użytkownik naciśnie klawisz Return w wielowierszowej wtyczce TextInput, zostanie utworzona nowa linia, a klawiatura będzie nadal widoczna. W jaki sposób należy wyłączyć klawiaturę dla wielowierszowego TextInput in React native?

Zrobiłem kilka badań. Zauważyłem, że kliknięcie na widok poza pozycją TextInput nie powoduje rozmycia TextInput, co powoduje, że klawiatura pozostaje widoczna?

<View style={styles.container}> 
    <TextInput 
    placeholder="To" 
    style={styles.input} 
    value={this.state.to} 
    onChangeText={(to) => this.setState({to})} 
    /> 
    <TextInput 
    placeholder="Text" 
    style={styles.textarea} 
    multiline={true} 
    numberOfLines={4} 
    value={this.state.text} 
    onChangeText={(text) => this.setState({text})} 
    /> 
</View> 

Dla ScrollView istnieje prop - keyboardShouldPersistTaps, który powoduje rozmycie TextInput. Czy istnieje odpowiednik tego dla widoku? Chcę, aby wielowierszowy TextInput został zamazany, aby klawiatura została odrzucona.

Answer 1

TextInput ma propa blurOnSubmit; po ustawieniu wartości true klawisz powrotu powoduje odrzucenie klawiatury.

Obecnie prop nie działa na systemie Android. Mam problem pisał na ten temat: https://github.com/facebook/react-native/issues/8778

Answer 2

Aby uzupełnić mój komentarz o returnKeyType, musisz także ustawić blurOnSubmit={true}, który uruchomi także obsługę zdarzeń onSubmitEditing po naciśnięciu przycisku Done.

Zobacz przykład https://rnplay.org/apps/0HIrmw, aby uzyskać szczegółowe informacje.

Answer 3

Uderzyłem głową o tym przez kilka godzin i po fiddling a niektóre głupie szczęście w końcu zorientowali się, jak sprawić, by multilinii TextInput odwołać tylko przez dotknięcie poza polem tekstowym . Trochę Przykład Ya nadzieję, że ktoś znajdzie to przydatne, ponieważ docs nie sprawiają, że wszystko jasne, że można dostać multilinie łatwo odrzucić ...

import React, { Component} from 'react'` 
import { 
keyboardAvoidingView, 
Keyboard, 
StatusBar, 
StyleSheet, 
TextInput, 
View, 
} from 'react-native'; 

class App extends Component { 
constructor(props){ 
super(props) 
this.state ={ 
     behavior: 'position', 
} 
this._keyboardDismiss = this._keyboardDismiss.bind(this); 
} 
componentWillMount() { 
this.keyboardDidHideListener = 
        Keyboard 
       .addListener('keyboardDidHide',this._keyboardDidHide);               
       } 

componentWillUnmount(){ 
this.keyboardDidHideListener.remove(); 
} 

_keyboardDidHide() { 
Keyboard.dismiss(); 
} 

render() { 

return (
    <KeyboardAvoidingView 
     style{{flex:1}} 
     behavior={this.state.behavior} 
    > 
    <TouchableOpacity 
     onPress={this._keyboardDidHide} 
    > 
    <View> 
     <TextInput 
      style={ 
      color: '#000', 
      paddingLeft: 15, 
      paddingTop: 10, 
      fontSize: 18,t} 
      multiline={true} 
      textStyle={{ fontSize: '20', fontFamily: 'Montserrat-Medium' }} 
      placeholder="Share your Success..." 
      value={this.state.text} 
      underlineColorAndroid="transparent" 
      returnKeyType={'default'} 
     /> 
    </View> 
    </TouchableOpacity> 

    </KeyboardAvoidingView> 
); 
} 
} 

Answer 4

Jest to uproszczona wersja bardzo pomocne odpowiedzi Austin powyżej.

Jeśli konwersja View masz na swoim ekranie/składników w TouchableOpacity z activeOpacity = {1} (ten zapobiega blaknięcie lub krycia efekty) można następnie przekazać go:

onPress={() => Keyboard.dismiss()} 

Upewnij zaimportowałeś TouchableOpacity i Keyboard z "native-native" i jesteś dobry.