ReactNavigation使用中遇到的问题有哪些-创新互联
小编给大家分享一下React Navigation使用中遇到的问题有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的萨尔图网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!在React Native的开发中,使用到react navigation框架时遇到了不少问题。主要是安卓和iOS中相对不协调的地方,特此记录
一、Navigation Bar
使用navigationbar的时候遇到如下的问题
1.navigation bar的底部有一条黑线
本意做一个bar的颜色和页面颜色一致的页面。只有顶部有两个其他按钮的时候。发现bar的底部有一条黑线。导致bar不能很好的匹配想要的页面效果。在header中设置一下代码中后可去除
static navigationOptions = { ... headerStyle: { ... borderBottomWidth: 0, }, }
2. android 的 Bar底部有一条阴影,自定义Bar背景图无法填充满
react navigation bar在安卓中默认会有一个高度。带来的视觉效果是底部会有一条阴影。而且造成另外一个比较头疼的效果是如果使用了带背景图的自定义Bar时。会发现背景图有覆盖不全的效果。两侧总有一些间隙。iOS中则不会出现此问题。将elevation属性置零后可解决这个问题
static navigationOptions = { ... headerStyle: { ... elevation: 0, }, }
3.android 中Bar标题居中问题
在安卓中,bar 的标题是居左的。iOS则默认居中。可以通过以下写法居中
static navigationOptions = { ... headerTitleStyle: { //此属性是标题的Style属性。可以接受标签的style ... alignSelf: "center", }, }
在左侧没有按键的时候。这样写就足够了。但是如果左侧有个返回键或者自定义的其他按键。在安卓中标题就会发生偏移。解决办法是右侧添加一个空按钮
static navigationOptions = { ... headerRight:}
4.带背景图的Navgation Bar
与源生不同。react navigation bar中并没有背景图这一属性。也就是说我们要使用带背景图的navigation bar的时候必须要使用自定义的view。
import {Header} from "react-navigation"; //header 需导入 const ImageHeader = props => (); static navigationOptions = { ... headerStyle: { //背景颜色必须为透明,不然无法透出底部图片 backgroundColor: "transparent", //安卓中不添加此属性会导致背景图无法铺满 elevation: 0, }, header: props => { return ; }, }
5.当StackNavigator与DrawerNavigator嵌套使用时手势冲突问题
当DrawerNavigator嵌套StackNavigator时。进入StackNav的二级界面后返回手势与打开DrawerNav打开菜单冲突。
static navigationOptions = { ... //禁止打开菜单 drawerLockMode: "locked-closed", //允许使用返回手势 gesturesEnabled: true, }
此设置按照需求自行修改
5.Navgation Bar高度不一致问题
使用自定义的Bar时。安卓和iOS高度不一致。Android计算Nav高度是从手机顶部开始计算。而iOS默认会向下偏移状态栏的高度。要做到效果统一。需要将安卓的Bar的paddingTop属性设为状态栏高度
import {StatusBar, Platform} from "react-native"; navigationOptions = { ... headerStyle: { ... paddingTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight, }, }
6.navigation Bar上使用自定义按钮
使用headerRight 或者 headerLeft 可以定制按钮或者View
static navigationOptions = { ... headerRight = () } btn
但是如果onPress方法要用到this.props、this.state或者是类中的其他方法的时候就会出现问题
在每个页面的类中,我们使用static navigationOptions={...}来配置navigation的一些配置。但是由于static 修饰的属性属于类的静态属性。无法调用this的属性方法。所以我们需要使用this.props.navigation.setParams({key:value ...})方法来设置header按钮的点击事件。
class Demo extends React,Component{ componentWillMount() { //绑定方法 this.props.navigation.setParams({rightOnPress: this.rightBtnOnPress}); } //点击方法 rightBtnOnPress = ()=>{ ... } static navigationOptions = ({navigation}) => { const params = navigation.state.params || {}; let navigationOptions = { ... headerRight = () } return navigationOptions; }; ... } btn
看完了这篇文章,相信你对“React Navigation使用中遇到的问题有哪些”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道,感谢各位的阅读!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文题目:ReactNavigation使用中遇到的问题有哪些-创新互联
标题来源:http://scyanting.com/article/csppde.html