Блог

react native: как можно исправить проблему, из-за которой клавиатура находится над текстовым полем, и невозможно увидеть, что пишется? в моем примере TextInput скрывается за клавиатурой, и я понятия не имею, как это предотвратить. я также пробую пример из here: example, и он также не работает для меня. в чем может быть проблема?

 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}>ebitua</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="close" value="1" />
            <Picker.Item label="no sig" value="2" />
            <Picker.Item label="error" 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}>notifi</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="put here"
          onChangeText={(text) => onChangeText(text)}
          value={value2}
        />
      </KeyboardAvoidingView>
      <View style={styles.AreasPrototypesBottomView}>
        <View style={styles.BottleView}>
          <TouchableOpacity
            onPress={() => {
              navigation.navigate('ways', { item });
            }}
          >
            <Image
              source={require('../assets/bottle.png')}
              style={{ height: 40, width: 40 }}
            />
          </TouchableOpacity>
        </View>

        <View style={styles.NoteView}>
          <TouchableOpacity
            onPress={() => {
              navigation.navigate('all');
            }}
          >
            <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>
  );
}
  

Используйте react-native KeyboardAvoidingView вместо родительского основного представления.

Как это в вашем коде:

  return (
    <KeyBoardAvoidingView
      style={{
        flex: 1,
        backgroundColor: '#cbced4',
      }}
    >