新浦京81707con > 注册购买 > 使用中遇到的问题小结,使用中遇到的问题

原标题:使用中遇到的问题小结,使用中遇到的问题

浏览次数:161 时间:2019-07-31

在React Native的开辟中,使用到react navigation框架时遇上了好些个标题。重假使安卓和iOS中相对不协和的地点,特此记录

React Navigation 使用中相遇的主题素材

在React Native的支付中,使用到react navigation框架时遇上了累累题目。重假设安卓和iOS中相对不调弄整理的地方,特此记录

一、开源库介绍

一、Navigation Bar

一、Navigation Bar

行使navigationbar的时候遭逢如下的难题

今年11月份,新开源的react-natvigation库举世瞩目。在短暂不到七个月的日子,github上星数已达5000 。Fb推荐使用库,而且在React Native当前风行版本0.44元帅Navigator删除。react-navigation据称有原生般的品质体验效果。只怕会成为今后React Native导航组件的主流军。本篇内容据说【 ^1.0.0-beta.9 】版本来介绍有关该库的利用和实战本事。能够见到,即使是beta版本,不过基本平静,大家可放心在类型中运用。奉上  react-navigation 官方文书档案

利用navigationbar的时候境遇如下的难题

1.navigation bar的底层有一条黑线

本意做叁个bar的水彩和页面颜色一样的页面。唯有最上部有多少个别的按键的时候。发掘bar的平底有一条黑线。导致bar无法很好的十二分想要的页面效果。在header中安装一下代码中后可去除

static navigationOptions = {
  ...
 headerStyle: {
        ...
        borderBottomWidth: 0,
    },
  }

该库包括三类组件:
(1)StackNavigator:用来跳转页面和传递参数
(2)TabNavigator:类似尾部导航栏,用来在一样显示器下切换不一样分界面
(3)DrawerNavigator:侧滑菜单导航栏,用于轻巧设置带抽屉导航的荧屏

1.navigation bar的底部有一条黑线

2. android 的 Bar后面部分有一条阴影,自定义Bar背景图不也许填充满

react navigation bar在安卓中暗许会有三个莫斯中国科学技术大学学。带来的视觉效果是底层会有一条阴影。并且导致别的一个比较脑仁疼的机能是只要选取了带背景图的自定义Bar时。会发觉背景图有覆盖不全的效能。两边总有部分空隙。iOS中则不会见世此难点。将elevation属性置零后可一举成功这一个难点

  static navigationOptions = {
  ...
  headerStyle: {
        ...
        elevation: 0,
    },
  }

二、react-navigation使用

本意做叁个bar的颜料和页面颜色一样的页面。只有最上部有四个别的按钮的时候。发掘bar的平底有一条黑线。导致bar无法很好的相配想要的页面效果。在header中装置一下代码中后可去除

3.android 中Bar标题居中难点

在安卓中,bar 的标题是居左的。iOS则暗许居中。能够通过以下写法居中

static navigationOptions = {
  ...
  headerTitleStyle: {
        //此属性是标题的Style属性。可以接受<Text>标签的style
        ...
        alignSelf: "center",
    },
  }

在左侧未有开关的时候。那样写就充裕了。不过只要左侧有个重回键可能自定义的别的开关。在安卓中标题就能够发生偏移。化解办法是左臂增多二个空开关

static navigationOptions = {
  ...
  headerRight: <View />
 }

具体内容大致分成如下:
(1)react-navigation库属性介绍
(2)StackNavigator、TabNavigator达成分界面间跳转,Tab切换
(3)StackNavigator分界面间跳转、传值、取值
(4)DrawerNavigator完结抽屉导航菜单
(5)DrawerNavigator扩张功能
(6)自定义react-navigation

static navigationOptions = {
 ...
 headerStyle: {
    ...
    borderBottomWidth: 0,
  },
 }

4.带背景图的Navgation Bar

与源生分裂。react navigation bar中并不曾背景图这一质量。也正是说大家要采纳带背景图的navigation bar的时候必须求使用自定义的view。

import {Header} from "react-navigation";
//header 需导入
const ImageHeader = props => (
    <View>
        <Image
            style={{position: "absolute", zIndex: -1, width: "100%", height: "100%", resizeMode: "cover"}}
            source={require(...)}
        />
        <Header {...props} style={{backgroundColor: "transparent"}} />
    </View>
);

static navigationOptions = {
  ...
  headerStyle: {
      //背景颜色必须为透明,不然无法透出底部图片
      backgroundColor: "transparent",
      //安卓中不添加此属性会导致背景图无法铺满
      elevation: 0,
  },
   header: props => {
        return <ImageHeader {...props} />;
    },
 }

1、StackNavigator属性介绍
navigationOptions:配置StackNavigator的一部分天性。  

2. android 的 Bar尾巴部分有一条阴影,自定义Bar背景图不能填充满

5.当StackNavigator与DrawerNavigator嵌套使用时手势争论难点

当DrawerNavigator嵌套StackNavigator时。步向StackNav的二级分界面后回来手势与开发DrawerNav展开菜单争论。

static navigationOptions = {
  ...
  //禁止打开菜单
  drawerLockMode: "locked-closed", 
  //允许使用返回手势
  gesturesEnabled: true,
 }

此设置依据必要自动修改

  1. title:标题,假使设置了那些导航栏和标签栏的title就能成为同样的,不引入应用 
  2. header:能够安装有个别导航的本性,假设掩饰最上部导航栏只要将以此本性设置为null 
  3. headerTitle:设置导航栏标题,推荐 
  4. headerBackTitle:设置跳转页面左侧重返箭头后边的文字,暗中认可是上多个页面的标题。可以自定义,也能够设置为null 
  5. headerTruncatedBackTitle:设置当上个页面标题不吻合重临箭头后的文字时,私下认可改成"重回" 
  6. headerRight:设置导航条右边。可以是开关或许另外视图控件 
  7. headerLeft:设置导航条左侧。可以是开关也许其余视图控件 
  8. headerStyle:设置导航条的样式。背景观,宽高档 
  9. headerTitleStyle:设置导航栏文字样式 
  10. headerBackTitleStyle:设置导航栏‘再次来到'文字样式 
  11. headerTintColor:设置导航栏颜色 
  12. headerPressColorAndroid:安卓独有的装置颜色纹理,供给安卓版本大于5.0 
  13. gesturesEnabled:是还是不是协理滑动再次回到击势,iOS私下认可支持,安卓暗中认可关闭  

react navigation bar在安卓中默许会有三个惊人。带来的视觉效果是底层会有一条阴影。并且导致另外三个相比胸闷的功效是只要应用了带背景图的自定义Bar时。会意识背景图有覆盖不全的职能。两边总有局地空隙。iOS中则不会冒出此难题。将elevation属性置零后可解决这么些题目

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,
    },
 }

screen:对应分界面名称,要求填入import之后的页面  

 static navigationOptions = {
 ...
 headerStyle: {
    ...
    elevation: 0,
  },
 }

6.navigation Bar上使用自定义按键

选取headerRight 可能 headerLeft 能够定制开关也许View

static navigationOptions = {
  ...
 headerRight = (<TouchableOpacity style={{marginRight: 10}} onPress={...}>
                <Text style={styles.NavSureButton}>btn</Text>
            </TouchableOpacity>)
 }

而是倘诺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 = (<TouchableOpacity style={{marginRight: 10}} onPress={params.rightOnPress}>
                <Text style={styles.NavSureButton}>btn</Text>
            </TouchableOpacity>)
        }
        return navigationOptions;
    };
    ...
}

mode:定义跳转作风  

3.android 中Bar标题居中难题

card:使用iOS和安卓默许的风格  

在安卓中,bar 的题目是居左的。iOS则暗中认可居中。能够通过以下写法居中

modal:iOS独有的使显示屏从最底层画出。类似iOS的present效果  

static navigationOptions = {
 ...
 headerTitleStyle: {
    //此属性是标题的Style属性。可以接受<Text>标签的style
    ...
    alignSelf: "center",
  },
 }

headerMode:重回上级页面时动画效果  

在侧边未有按钮的时候。那样写就丰硕了。可是只要左侧有个重临键大概自定义的其余开关。在安卓中标题就能够爆发偏移。解决办法是右臂增添二个空开关

float:iOS暗许的职能  

static navigationOptions = {
 ...
 headerRight: <View />
 }

screen:滑动进度中,整个页面都会回到   

4.带背景图的Navgation Bar

none:无动画  

与源生分歧。react navigation bar中并从未背景图这一性质。也正是说大家要采取带背景图的navigation bar的时候一定要运用自定义的view。

cardStyle:自定义设置跳转职能  

import {Header} from "react-navigation";
//header 需导入
const ImageHeader = props => (
  <View>
    <Image
      style={{position: "absolute", zIndex: -1, width: "100%", height: "100%", resizeMode: "cover"}}
      source={require(...)}
    />
    <Header {...props} style={{backgroundColor: "transparent"}} />
  </View>
);

static navigationOptions = {
 ...
 headerStyle: {
   //背景颜色必须为透明,不然无法透出底部图片
   backgroundColor: "transparent",
   //安卓中不添加此属性会导致背景图无法铺满
   elevation: 0,
 },
  header: props => {
    return <ImageHeader {...props} />;
  },
 }
  1. transitionConfig: 自定义设置滑动再次回到的配置  
  2. onTransitionStart:当调换动画就要初叶时被调用的成效  
  3. onTransitionEnd:当调换动画达成,将被调用的效果  

5.当StackNavigator与DrawerNavigator嵌套使用时手势争辨难题

path:路由中设置的门路的覆盖映射配置  

当DrawerNavigator嵌套StackNavigator时。步向StackNav的二级分界面后重回击势与开垦DrawerNav张开菜单争辩。

initialRouteName:设置暗许的页面组件,必须是上边已登记的页面组件  

static navigationOptions = {
 ...
 //禁止打开菜单
 drawerLockMode: "locked-closed", 
 //允许使用返回手势
 gesturesEnabled: true,
 }

initialRouteParams:初阶路由参数 

此设置依据供给自动修改

注:大家或者对于path不太驾驭。path属性适用于任何app或浏览器接纳url展开本app并跻身钦命页面。path属性用于声澳优个分界面路线,譬如:【/pages/Home】。此时大家得以在三哥伦比亚大学浏览器中输入:app名称://pages/Home来运转该App,并踏入Home分界面。

5.Navgation Bar高度分歧样难点

2、TabNavigator属性介绍

行使自定义的Bar时。安卓和iOS中度不平等。Android总计Nav中度是从手提式有线电话机最上部先导臆想。而iOS暗中同意会向下偏移状态栏的万丈。要完结功效统一。需求将安卓的Bar的paddingTop属性设为状态栏中度

screen:和导航的效率是一致的,对应分界面名称,能够在别的页面通过那个screen传值和跳转。  

import {StatusBar, Platform} from "react-native";
navigationOptions = {
 ...
 headerStyle: {
   ...
   paddingTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight,
  },
 }

navigationOptions:配置TabNavigator的某个特性  

6.navigation Bar上采纳自定义开关

title:标题,会同有时候安装导航条和标签栏的title  

使用headerRight 只怕 headerLeft 能够定制按键大概View

tabBarVisible:是不是掩盖标签栏。私下认可不隐蔽(true)  

static navigationOptions = {
 ...
 headerRight = (<TouchableOpacity style={{marginRight: 10}} onPress={...}>
        <Text style={styles.NavSureButton}>btn</Text>
      </TouchableOpacity>)
 }

tabBarIcon:设置标签栏的Logo。要求给每一个都设置  

可是假若onPress方法要用到this.props、this.state恐怕是类中的其余办法的时候就能合世难题

tabBarLabel:设置标签栏的title。推荐  

在种种页面包车型大巴类中,大家运用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 = (<TouchableOpacity style={{marginRight: 10}} onPress={params.rightOnPress}>
        <Text style={styles.NavSureButton}>btn</Text>
      </TouchableOpacity>)
    }
    return navigationOptions;
  };
  ...
}

tabBarPosition:设置tabbar的职位,iOS暗中同意在尾部,安卓暗中同意在最上部。(属性值:'top','bottom')  

以上正是本文的全体内容,希望对大家的就学抱有帮衬,也期望我们多多支持脚本之家。

swipeEnabled:是或不是同目的在于标签之间进行滑动  

你也许感兴趣的稿子:

  • 法定推荐react-navigation的现实选取详解
  • React Native react-navigation 导航应用详解
  • react-navigation 怎么样判定用户是或不是登陆跳转到登入页的诀要
  • React Native中导航组件react-navigation跨tab路由拍卖详解
  • React Native学习课程之自定义NavigationBar详解
  • react-native使用react-navigation进行页面跳转导航的亲自去做

animationEnabled:是不是在改造标签时展现动画  

lazy:是或不是基于供给懒惰呈现标签,并非提前,意思是在app张开的时候将尾部标签栏全部加载,默许false,推荐为true  

trueinitialRouteName: 设置暗中同意的页面组件  

backBehavior:按 back 键是不是跳转到第二个Tab(首页), none 为不跳转  

tabBarOptions:配置标签栏的一些质量iOS属性  

activeTintColor:label和icon的前景观 活跃状态下  

activeBackgroundColor:label和icon的背景观 活跃状态下  

inactiveTintColor:label和icon的前景观 不活跃状态下  

inactiveBackgroundColor:label和icon的背景观 不活跃状态下  

showLabel:是还是不是展现label,私下认可开启 style:tabbar的体裁  

labelStyle:label的体制安卓属性  

activeTintColor:label和icon的前景观 活跃状态下  

inactiveTintColor:label和icon的前景观 不活跃状态下  

showIcon:是还是不是出示Logo,私下认可关闭  

showLabel:是或不是显示label,暗中认可开启 style:tabbar的体制  

labelStyle:label的样式 upperCaseLabel:是还是不是使标签大写,默认为true  

pressColor:material涟漪效果的水彩(安卓版本要求大于5.0)  

pressOpacity:按压标签的发光度变化(安卓版本必要小于5.0)  

scrollEnabled:是还是不是启用可滚动选项卡 tabStyle:tab的体裁  

本文由新浦京81707con发布于注册购买,转载请注明出处:使用中遇到的问题小结,使用中遇到的问题

关键词: 新浦京81707con ReactNa... 前端收藏 React Native

上一篇:Shell高级技巧,Shell脚本实现的单机流量统计功能

下一篇:没有了