ReactNative布局

最新推荐文章于 2020-02-04 16:14:17 发布

原创最新推荐文章于 2020-02-04 16:14:17 发布 · 601 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ReactNativ #布局

本文介绍了ReactNative的布局系统，重点讲解了flexbox的属性，如flexDirection、alignItems、justifyContent和flex等。同时提到了在ReactNative中如何使用Toast以及全局变量的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[ReactNative布局]

flexbox主要有以下几个属性alignItems，alignSelf，flex，flexDirection，flexWrap，justifyContent。

flexDirection

 flexDirection:'row'   水平方向
 flexDirection:'column'竖直方向

指定主轴的方向即指定子view的布局方向。

alignItems

定义子组件在垂直方向上的对齐方式。

flex-start：与父组件的顶部对齐。
flex-end：与父组件的底部对齐。
center：处于父容器的中间位置。
stretch：竖直上填充整个容器。

justifyContent

水平对齐方式。justifyContent和alignItems是相对的。

flex-start：伸缩项目与父容器左端靠齐。

flex-end：与父容器右端靠齐。

center：水平居中。

space-between：第一个子组件位于父容器左端，最后一个子组件位于父容器最右端。然后平均分配在父容器水平方向上。

space-around：所有子组件平均分配在父容器的水平方向上，左右都有留空隙。

alignSelf

设置单独组件的竖直对齐方式，与alignItem有点像。

auto:按照自身设置的宽高来显示，如果没设置，效果跟streth一样。

flex-start:与父容器顶部对齐。

flex-end:与父容器底部对齐。

center:位于垂直位置。

streth:垂直拉伸。

flex

flex设置view比例，类比android中的weight属性。

flexWrap

设置是否可换行，有两个属性

nowrap:即使空间不够也不换行。

wrap:空间不够的话自动换行。

./代表同级目录

 HomeTwo: {
     screen: ScreenTwo,  // 必须, 其他都是非必须
 path:'./src/activity/HomeTwo', //使用url导航时用到, 如 web app 和 Deep Linking
 navigationOptions: {}  // 此处设置了, 会覆盖组件内的`static navigationOptions`设置. 具体参数详见下文
 },
 HomeTwo: { screen: Setting },

 }, {
    initialRouteName: 'HomeScreen', // 默认显示界面
     navigationOptions: {  // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置)
         header: {  // 导航栏相关设置项
             backTitle: '返回',  // 左上角返回键文字
             style: {
                 backgroundColor: '#fff'
             },
             titleStyle: {
                 color: 'green'
             }
         },
         cardStack: {
             gesturesEnabled: true
         }
     },
     mode: 'card',  // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
     headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
     onTransitionStart: ()=>{ console.log('导航栏切换开始'); },  // 回调
     onTransitionEnd: ()=>{ console.log('导航栏切换结束'); }  // 回调**

Toast使用

RN中使用全局变量

global.constants = {
   website:'http://www.baidu.com',
   name:'百度',
};