首页 > 其他分享 >react-native 小坑坑

react-native 小坑坑

时间:2023-02-14 15:35:08浏览次数:31  
标签:坑坑 层级 elevation ios scrollView react 组件 android native


android 上​​keyboardWillShow​​​不生效可以使用​​keyboardDidShow​​​或者​​react-native-android-keyboard-adjust​

boxShadow
不能inset向内阴影
ios:不能同overflow:“hidden”一起,建议设置点margin,有时会被周围的元素遮挡。
android:不使用插件的情况只能使用elevation添加一个阴影无法设置偏移,但是会影响组件层级在设置了绝对定位情况下,比如elevation:10 层级的zIndex比 elevation:9的zIndx更低,但是elevation高的会遮盖层级低的,而且要设置背景颜色否则会有一个阴影框

一个组件或者插件在ios或android一端不生效的时候可以在组件外面套一层​​<>...</>​​试试,至少google-map是这样

​KeyboardAvoidingView​

<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : >"height"} keyboardVerticalOffset={Platform.OS == "ios" ? 0 >: 20} enabled={Platform.OS === "ios" ? true : false}> ... </KeyboardAvoidingView><KeyboardAvoidingView style={{flex: 1}} behavior={'padding'} keyboardVerticalOffset={65}> <FlatList .../> <TextInput ... /> </KeyboardAvoidingView>

​TouchableWithoutFeedback​​​内包裹​​scrollView​​scrollView无法滚动,可以吧点击放在scrollView内中实现


标签:坑坑,层级,elevation,ios,scrollView,react,组件,android,native
From: https://blog.51cto.com/u_15964288/6056972

相关文章

  • react-native模板
    expo升级SDK38后,原本创建项目时可选的导航模板变成了由typescript写的模板,于是自己还是js写一个,以下是效果地址​​https://github.com/tangmusenLiu/react-native-templat......
  • react-native音乐播放器
    android效果[video(video-q8EJW2y5-1592291410395)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=583605396)(image-https://img-blog.csdnimg.cn/img......
  • react-native手势动画制作精美卡片拖拽效果
    视频学习地址https://www.bilibili.com/video/BV1h7411o7zE代码importReact,{Component}from'react'import{StyleSheet,Text,View,PanResponder,Animate......
  • react-native仿写洛克王国手游版
    首先声明此项目完全是出于学习和对洛克王国的喜爱而生,项目中使用的游戏宠物若涉及侵权请联系我前两天和朋友聊天说到洛克王国没有手游,正好最近在学习react-native,觉得可以尝......
  • react豆瓣API获取电影数据小demo
    entd使用使用entd的layout布局快速搭建页面​​entd官网​​页面刷新,路由不刷新,设置sider和路由同步,在componentWillMount还是componentDidMount都获取不到路由信息,但是能......
  • Jest + React 单元测试最佳实践
    我们是袋鼠云数栈UED团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。前言单元测试是一种用于测试“单元”的......
  • react typescript封装函数式组件styled-component
    interfaceIButton{margin?:boolean;width?:string;justify?:JustifyContentProps;}constButton=styled.button<IButton>`.....`;interfaceILoadButtonext......
  • 前端二面经典react面试题
    如何解决props层级过深的问题使用ContextAPI:提供一种组件之间的状态共享,而不必通过显式组件树逐层传递props;使用Redux等状态库。react实现一个全局的dialogimpo......
  • 问:你是如何进行react状态管理方案选择的?
    前言:最近接触到一种新的(对我个人而言)状态管理方式,它没有采用现有的开源库,如redux、mobx等,也没有使用传统的useContext,而是用useState+useEffect写了一个发布订阅者模式进......
  • 京东前端react面试题及答案
    useEffect与useLayoutEffect的区别(1)共同点运用效果:useEffect与useLayoutEffect两者都是用于处理副作用,这些副作用包括改变DOM、设置订阅、操作定时器等。在函数......