react-native - 避免在底部的项目上使用键盘

问题描述

我有这个 React Native proyect（带有 Expo），我在容器底部有 2 个按钮。当我打开键盘写东西时，这些东西会随键盘一起出现。¿我怎样才能避免这种情况？

这是容器代码->

render() {
    return (
      <View style={{flex: 1}}>
        <Text style={styles.titulo}>Nueva Tarjeta</Text>
        <View style={{  flex: 1}}>
          <CreditCardInput
            requiresName={true}
            allowScroll={true}
            labels={{
              name: "Nombre del titular",
              number: "Número de tarjeta",
              expiry: "Venc",
              cvc: "CVC",
            }}
            cardScale={1}
            labelStyle={{ fontFamily: "OpenSansRegular" }}
            placeholders={{
              name: "Juan Perez",
              number: "1234 1234 1234 1234",
              expiry: "MM/AA",
              cvc: "123",
            }}
            onChange={this._onChange}
          />
        </View>
        <View style={{ flexDirection: "row", alignSelf: "center", 
    justifyContent: 'flex-end', marginBottom: 10}}>
          <TouchableOpacity style={styles.botonVolver}>
            <Text style={styles.textoVolver}>Volver</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.botonAceptar}>
            <Text style={styles.textoAceptar}>Aceptar</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

提前致谢！

标签： react-nativestylesreact-native-androidreact-native-ios

您可以尝试在 Android 上使用其prop 设置为的KeyboardAvoidingView ：behavior'height'

const screenHeight = Dimensions.get("window").height;

export default function App() {
  return (
    <KeyboardAvoidingView behavior="height" style={{ flex: 1 }}>
      <View style={{ height: screenHeight - 75 }}>
        <Text style={styles.titulo}>Nueva Tarjeta</Text>
        <CreditCardInput
          requiresName={true}
          allowScroll={true}
          labels={{
            name: "Nombre del titular",
            number: "Número de tarjeta",
            expiry: "Venc",
            cvc: "CVC",
          }}
          cardScale={1}
          labelStyle={{ fontFamily: "OpenSansRegular" }}
          placeholders={{
            name: "Juan Perez",
            number: "1234 1234 1234 1234",
            expiry: "MM/AA",
            cvc: "123",
          }}
        />
      </View>
      <View
        style={{
          flexDirection: "row",
          alignSelf: "center",
          justifyContent: "flex-end",
          marginBottom: 10,
        }}
      >
        <TouchableOpacity style={styles.botonVolver}>
          <Text style={styles.textoVolver}>Volver</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.botonAceptar}>
          <Text style={styles.textoAceptar}>Aceptar</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
}

我还使用更改了View包含CreditCardInput要基于屏幕高度的高度，因为在设置Dimensions时过渡出现故障。flexView

请务必Dimensions从KeyboardAvoidingView.'react-native'

react-native - 避免在底部的项目上使用键盘 - React Native

问题描述

解决方案

推荐阅读