react native：什么是正确的方法，使键盘不在文本输入上？

Question

我想知道正确的方法是什么，以便键盘不在文本输入上但应该在它下面？ 我创建了一个文本框，但每次我尝试写东西时，键盘都会覆盖我的文本框，我看不到我在那里写的东西。 我很乐意帮助解决问题

function E_BitsuaDigdum() {
  const [selectedValue3, setSelectedValue3] = useState('1');
  const [value2, onChangeText] = React.useState('');

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#cbced4',
      }}
    >
      <View
        style={{
          flexDirection: 'column',
          paddingTop: 20,
        }}
      >
        <Text style={styles.label}>סיבת אי ביצוע:</Text>
        <View
          style={{
            width: 200,
            borderWidth: 2,
            borderRadius: 5,
            backgroundColor: 'white',
            left: 15,
          }}
        >
          <Picker
            mode="dropdown"
            selectedValue={selectedValue3}
            style={{
              placeholderTextColor: 'black',
              height: 50,
              width: 200,
              right: -10,
              transform: [{ scaleY: 1.2 }, { scaleX: 1.2 }],
            }}
            onValueChange={(itemValue, itemIndex) =>
              setSelectedValue3(itemValue)
            }
          >
            <Picker.Item label="מתקן סגור" value="1" />
            <Picker.Item label="אין קליטה" value="2" />
            <Picker.Item label="תקלה במכשיר" value="3" />
          </Picker>
        </View>
      </View>

      <View
        style={{
          top: 20,
          alignSelf: 'center',
          backgroundColor: '#275d9f',
          height: 50,
          width: 400,
          borderRadius: 5,
          borderColor: 'black',
          borderWidth: 2,
        }}
      >
        <Text style={styles.Notice}>הערות אי ביצוע</Text>
      </View>
      <KeyboardAvoidingView
        behaviour="position"
        style={styles.container}
        enabled
      >
        <TextInput
          style={{
            top: 20,
            alignSelf: 'center',
            height: 200,
            width: 400,
            backgroundColor: 'white',
            borderWidth: 2,
            borderRadius: 5,
            fontSize: 18,
          }}
          placeholder="כתוב כאן.."
          onChangeText={(text) => onChangeText(text)}
          value={value2}
        />
      </KeyboardAvoidingView>
      <View style={styles.AreasPrototypesBottomView}>
        <View style={styles.BottleView}>
          <TouchableOpacity
            onPress={() => {
              navigation.navigate('אופן הדיגום', { item });
            }}
          >
            <Image
              source={require('../assets/bottle.png')}
              style={{ height: 40, width: 40 }}
            />
          </TouchableOpacity>
        </View>

        <View style={styles.NoteView}>
          <TouchableOpacity
            onPress={() => {
              navigation.navigate('פרטים כלליים');
            }}
          >
            <Image
              source={require('../assets/note2.png')}
              style={{ height: 35, width: 35 }}
            />
          </TouchableOpacity>
        </View>
        <View style={styles.SendView}>
          <TouchableOpacity
            onPress={() => {
              navigation.navigate('');
            }}
          >
            <Image
              source={require('../assets/send.png')}
              style={{ height: 45, width: 45 }}
            />
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}

Answer 1

您可以使用KeyboardingAvoidingView 向上滚动Keyboard

https://reactnative.dev/docs/keyboardavoidingview

这是一个例子

import React from 'react';
import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, TouchableWithoutFeedback, Button, Keyboard  } from 'react-native';

const KeyboardAvoidingComponent = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      style={styles.container}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.inner}>
          <Text style={styles.header}>Header</Text>
          <TextInput placeholder="Username" style={styles.textInput} />
          <View style={styles.btnContainer}>
            <Button title="Submit" onPress={() => null} />
          </View>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: "space-around"
  },
  header: {
    fontSize: 36,
    marginBottom: 48
  },
  textInput: {
    height: 40,
    borderColor: "#000000",
    borderBottomWidth: 1,
    marginBottom: 36
  },
  btnContainer: {
    backgroundColor: "white",
    marginTop: 12
  }
});

export default KeyboardAvoidingComponent;