Loại bỏ bàn phím trong nhiều dòng TextInput trong React native

Question

Khi người dùng nhấn phím Return trong một TextInput đa dòng, một dòng mới được tạo và bàn phím tiếp tục hiển thị. Làm thế nào bàn phím nên được loại bỏ cho TextInput đa nguyên trong React bản địa?

Tôi đã thực hiện một số nghiên cứu. Tôi thấy rằng việc nhấp vào Xem bên ngoài TextInput không làm mờ TextInput, điều này khiến bàn phím vẫn hiển thị?

<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> 

Đối với ScrollView, có một prop - keyboardShouldPersistTaps làm cho TextInput bị mờ. Có tương đương với điều đó cho Chế độ xem không? Tôi muốn TextInput đa chiều làm mờ để bàn phím bị loại bỏ.

Answer 1

TextInput có blurOnSubmit chống; khi được đặt thành true, phím trả về sẽ loại bỏ bàn phím.

Tuy nhiên, hiện tại giá trị không hoạt động trên Android. Tôi đã đăng một vấn đề về chủ đề này: https://github.com/facebook/react-native/issues/8778

Answer 2

Để hoàn thành nhận xét của tôi về returnKeyType, bạn cũng cần đặt blurOnSubmit={true} cũng sẽ kích hoạt xử lý sự kiện onSubmitEditing khi Thao tác được nhấn.

Xem ví dụ https://rnplay.org/apps/0HIrmw để biết chi tiết.

Answer 3

Đập đầu của tôi chống lại điều này trong một vài giờ và sau khi chơi xung quanh và một số may mắn câm cuối cùng đã tìm ra cách làm cho một TextInput multiline bỏ qua chỉ cần chạm vào bên ngoài hộp văn bản . Ít Ví dụ cho ya'll hy vọng rằng ai đó phát hiện này rất hữu ích vì các tài liệu không làm cho nó tất cả rõ ràng rằng bạn có thể nhận multilines để sa thải một cách dễ dàng ...

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

Đây là một phiên bản đơn giản của câu trả lời rất hữu ích austin của ở trên.

Nếu bạn chuyển đổi các Xem bạn có cho màn hình của bạn/phần vào một TouchableOpacity với activeOpacity = {1} (điều này ngăn cản bất kỳ xóa nhòa hoặc opacity hiệu ứng), bạn có thể sau đó vượt qua nó:

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

Hãy chắc chắn rằng bạn đã nhập TouchableOpacity và Bàn phím từ 'phản ứng gốc' và bạn tốt.