首页 > 其他分享 >react native 使用 KeyboardAvoidingView 无效

react native 使用 KeyboardAvoidingView 无效

时间:2023-09-22 10:23:12浏览次数:49  
标签:padding flex KeyboardAvoidingView react 设置 native

组件介绍:

该组件将根据键盘高度自动调整其高度、位置或底部填充,以在显示虚拟键盘时保持可见。

官方文档:

KeyboardAvoidingView 文档地址

遇到的问题:

  1. KeyboardAvoidingView 标签要设置 behavior={Platform.OS === "ios" ? "padding" : "height"},iOS系统要使用padding否则样式可能会达不到预期效果。
  2. KeyboardAvoidingView 包裹的内容最外层的盒子的 justifyContent 需要设置为 flex-end、space-around 等(具体使用哪个要根据需求确定),默认的 flex-start 会导致不生效。
  3. KeyboardAvoidingView 包裹的内容最外层的盒子的高度设置为 100% 时,或者设置 flex:1 时,也可能会导致无效(在我的项目里出现了这个问题)。

官方示例代码:

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;

标签:padding,flex,KeyboardAvoidingView,react,设置,native
From: https://www.cnblogs.com/lpkshuai/p/17721687.html

相关文章

  • react的todolist
    React的todolistsrc/main.jsximportReactfrom'react'importReactDOMfrom'react-dom/client'importAppfrom'./App.jsx'import'./index.css'ReactDOM.createRoot(document.getElementById('root')).render(......
  • react的todolist拆分项目
    React的todolist的拆分项目TodoList.jsximportTodofrom"./Todo"exportdefaultfunctionTodoList({todos,toggleTodo,deleteTodo}){return<><ul>{todos.map(todo=><......
  • React学习之类组件的this指向问题
    免责声明我们幼儿园有适合自己看的注释拉满版文档,目标是我奶来都能看懂(不是)。1.前置知识类this指向call、bind、apply待展开...欸嘿,我怎么什么都想不己来了1.1es6类的简单回顾   classPerson{    //构造器    constructor(name,age){ ......
  • react基础操作
    组件之间进行参数传递首先我们创建一个组件,在我们的主程序中把数据传递过去import{useState}from'react'importSOMEfrom'./g6/ant-d-g6'import'./App.css'functionApp(){const[data,setData]=useState<String>('传递参数')return(......
  • vue3的ref、reactive的使用
    一、介绍ref和reactive是Vue3中用来实现数据响应式的API,一般情况下,ref推荐定义基本数据类型,reactive推荐定义引用数据类型(对象或数组) 二、ref与reactive对比<template><p>{{person.name}}</p><p>{{person.long}}</p><p>{{age}}</p><p>{{info.addr......
  • React 虚拟滚动 长列表
    定高版本1"useclient";2importReact,{useCallback,useMemo,useState}from"react";34interfaceIProps{5list:any[];6fixedHeight:number;7}89//Fixedheight10constVirtualView=(props:IProps)=>{1......
  • React hooks详解
    importReact,{useEffect,useState}from'react';hook是react16.8的新增特性,他可以让你不在编写class的情况下shiystate以及react的特性Hooks的出现,首先解决了以下问题:告别了令人疑惑的生命周期告别类组件中烦人的this告别繁重的类组件,回归到了熟悉的函数组件reac......
  • React_doc
    React=》构建用户界面的JS库,用户界面是由按钮、文本和图像等小的单元内容构建。React可以组合成可重用、可嵌套的组件。组件案例functionProfile(){return(<imgsrc='https://i.xxx.com/test.jpg'alt=''/>)}exportdefaultfunctionGallery(){retur......
  • 框架分析(2)-React
    (框架分析(2)-React)专栏介绍link主要对目前市面上常见的框架进行分析和总结,希望有兴趣的小伙伴们可以看一下,会持续更新的。希望各位可以监督我,我们一起学习进步。ReactReact是由Facebook研发的一个用于构建用户界面的JavaScript库。它采用了组件化的开发方式,通过将界面拆分成......
  • Vue3深度解析:reactive和ref的区别你真的了解吗?
    Vue3中引入了CompositionAPI,其中包含了reactive和ref两个核心函数。这两个函数都是用于创建响应式数据的,但它们之间有一些区别。首先,让我们来看一下reactive函数。reactive函数接受一个普通对象作为参数,并返回一个新的响应式对象。这个响应式对象会跟踪所有属性的变化,并在属性发......