Question

我创建了一个组件DismissKeyboard。 TouchableWithoutFeedback包装其子级。当有人在组件外单击时，键盘应该关闭。我在做什么错了？

DismissKeyboard.js

const DismissKeyboard = ({children}) => (
  <TouchableWithoutFeedback
    accessible={false}
    onPress={() => Keyboard.dismiss()}
  >
    {children}
  </TouchableWithoutFeedback>
);

包装我的TextInput

<DismissKeyboard>
        <View style={styles.noteContainer}>
          <TextInput
            style={styles.noteTextInputStyling}
            multiline
            value={note}
            placeholder={'Tap to edit'}
            placeholderTextColor={globals.COLOR.textColor}
            onChangeText={(text) => {
              setNote(text);
            }}
          />
        </View>
      </DismissKeyboard>

我想念什么？任何帮助将不胜感激...

Answer 1

尝试像这样使用它：

const DismissKeyboard = ({children}) => (
  <TouchableWithoutFeedback
    accessible={false}
    onPress={() => Keyboard.dismiss()}
  >
   <View>
    {children}
   </View>
  </TouchableWithoutFeedback>
);

Answer 2

尝试使用KeyboardAvoidingView和TouchableWithoutFeedback的组合，如下所示。请注意使用Keyboard.dismiss而不是Keyboard.dismiss（）

import React from 'react';
import {
  Keyboard, KeyboardAvoidingView, TouchableWithoutFeedback,
} from 'react-native';

const DismissKeyboard = ({ children }) => (
  <TouchableWithoutFeedback style={{ flex: 1 }} onPress={Keyboard.dismiss}>
    <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
      {children}
    </KeyboardAvoidingView>
  </TouchableWithoutFeedback>
);

反应原生TouchableWithoutFeedback不起作用

2 个答案: