ReactNative佈局

[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:'百度',
};