Question

我正在创建一个React Native应用程序，以学习如何使用React Native。在创建文本输入的ui时，我基本上遵循了本教程YouTube。我的问题是我在输入旁边有一个按钮。我也将这两个组件嵌套在键盘内部以避免视图。当我按下键盘上的send时，我清除了其文本输入，但我想取消其输入。当我按下键盘上的发送按钮时，它可以工作，但是当我按下应用程序中输入旁边的react native按钮时，它会通过该功能来发送消息，然后再次重新调整输入的焦点。 / p>

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  Button,
  StatusBar,
  StyleSheet,
  View,
  Text,
  KeyboardAvoidingView,
  FlatList,
  TextInput,
  ScrollView,
  SafeAreaView,
  TouchableOpacity,
  Keyboard
} from 'react-native';

import { Ionicons } from '@expo/vector-icons';



import colors from '../../styles/styles';


const INPUT_HEIGHT = 65

class HomeScreen extends React.Component {


  state = {
    message : ""
  }

  onMessageSend = () => {
    alert(this.state.message);
    this.setState({
      message : ''
    });
    Keyboard.dismiss()
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
          <View style = {styles.messages}>
            <Text>Messages</Text>
          </View>
          <KeyboardAvoidingView
          behavior = 'padding'
          //keyboardVerticalOffset = {INPUT_HEIGHT}
          enabled
          >
          <ScrollView
          keyboardShouldPersistTaps = "handled"
          >
          <View style = {styles.input}>
              <View style = {styles.inputWrapper}>
                <TextInput
                style = {styles.textInput}
                ref={ref => (this._input = ref)}
                placeholder = "Message"
                returnKeyType = "send"
                value = {this.state.message}
                onChangeText = {(text) => {this.setState({message : text})}}
                onSubmitEditing = {this.onMessageSend}
                />
              </View>
              <TouchableOpacity onPress = {this.onMessageSend}>
              <Ionicons name="ios-send" size={32} color="black" />
              </TouchableOpacity>
          </View>
          </ScrollView>
          </KeyboardAvoidingView>


      </SafeAreaView>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  messages : {
    flex : 1,
    backgroundColor : colors.green,
  },
  textInput : {
    flex : 1
  },
  input : {
    height: 65,
    backgroundColor : "#fefefe",
    bottom : 0,
    right : 0,
    left : 0,
    flexDirection : 'row',
    alignItems : 'center',
    justifyContent : 'space-around',
    borderTopWidth : StyleSheet.hairlineWidth,
    borderColor : "#C1C9D3"
  },
  inputWrapper : {
    backgroundColor : "#fff",
    width: "85%",
    height: "65%",
    borderRadius : 25,
    borderWidth : StyleSheet.hairlineWidth,
    borderColor : "#C1C9D3",
    paddingHorizontal : 16,
  }
});



export default HomeScreen;

我希望发生的事情是，当我按下图标按钮并保持不专心时，输入将模糊，但是实际上发生的事情是，输入不专心，提醒用户，然后重新对焦。

当按下键盘上的“发送”按钮和实际应用程序中的图标按钮时，如何使输入完全失去焦点？或者，更好的是，在除键盘以外的任何位置进行敲击时，如何使输入失去焦点？

React Native使键盘消除对键盘上按键的关注，{AvoidingView

0 个答案: