React Navigation 學(xué)習(xí)筆記

Screen

表示一個(gè)屏幕界面

class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

Screen Navigation Options

  • 靜態(tài)定義方法。寫法同上秉沼。
  • 動(dòng)態(tài)定義方法贬丛。
static navigationOptions = ({ navigation, screenProps, navigationOptions }) => ({ 
   title: navigation.state.params.name,
   headerRight: <Button color={screenProps.tintColor} />
})

API Definition

{
   title,
   header, // null 時(shí)不展示屏幕的頭部
   headerTitle,
   headerBackTitle,
   headerTruncatedBackTitle,
   headerRight,
   headerLeft,
   headerStyle,
   headerTitleStyle,
   headerBackTitleStyle,
   headerPressColorAndroid,
   getturesEnabled
}

Navigator

將多個(gè)屏幕層疊起來右冻,定義各個(gè)屏幕界面之間的邏輯

StackNavigator

從一個(gè)屏幕跳轉(zhuǎn)到下一個(gè)屏幕,定義多個(gè)相互關(guān)聯(lián)的屏幕捡偏。

API Definition

StackNavigator(RouteConfigs, StackNavigatorConfig)

// RouteConfig
RouteConfigs: {
   screen: 'Screen1' // component,
   path: '/', // deep linking 或 web 下會(huì)用到
   navigationOptions: ({navigation}) => ({title: navigation.state.params.name}) // 重寫Screen下的定義
}

StackNavigatorConfig: {
  inittialRouteName,
  initialRouteParams,
  navigationOptions,
  paths,
  mode,
  headerMode,
  cardStyle,
  transitionConfig,
  onTransitionStart,
  onTransitionEnd
}

舉個(gè)栗子:

const ModalStack = StackNavigator({
  Home: {
    screen: MyHomeScreen,
    path: '/' 
  },
  Profile: {
    path: 'people/:name',
    screen: MyProfileScreen,
  },
});

TabNavigator

關(guān)聯(lián)多個(gè) tab 的 Screen

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

API Definition

TabNavigator(RouteConfigs, TabNavigatorConfig)

// RouteConfigs 同 StackNavigator

TabNavigatorConfig: {
   tabBarComponent,
   tabBarPosition, // top 或 bottom
   swipeEnabled,
   animationEnabled,
   lazy,
   tabBarOptions: {
      avtiveTintColor,
      activeBackgroundColor,
      inactiveTintColor,
      inactiveBackgroundColor,
      showLabel,
      style,    
      labelStyle,
      tabStyle
   },
   initialRouteName,
   order, 
   paths,
   backBehavior
}

舉個(gè)栗子

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

DrawerNavigator

定義一個(gè)抽屜列表

API Definition

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

// RouteConfig 同 StackNavigator

DrawerNavigatorConfig: {
   drawerWidth,
   drawerPosition,
   contentComponent,
   contentOptions: {
      
   }
}

舉個(gè)栗子

const MyApp = DrawerNavigator(
  {
    First: {
      path: '/',
      screen: FirstScreen,
    },
    Second: {
      path: '/sent',
      screen: SecondScreen,
    },
  },
  {
    initialRouteName: 'First',
    drawerPosition: 'left',
    drawerWidth: 200,
    contentOptions: {
      activeTintColor: 'red'
    }
  }
)

Navigator Props

將StackNavigator 換成 TabNavigator 或 DrawerNavigator 同樣成立
const SomeStack = StackNavigator({
  // config
});

<SomeStack
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

Screen Navigation Prop

每個(gè) Screen 都會(huì)接收到 一個(gè) navigation Props, 如下:

this.props.navigation : {
   navigate: {
      routeName,
      params,
      action
   }, // 導(dǎo)航到其他 Screen
   state: {
      index, 
      routes: [{
          routeName,
          key,
          params
      }]
 },// Screen 當(dāng)前的 state 或 route
   setParams, // 改變路由中的參數(shù)
   goBack, // 返回到上一屏
   dispatch // 向路由發(fā)出 Action
}

navigator 也有 navigation 屬性,但可能只有 state, 和 dispatch 兩個(gè)屬性峡迷,

Navigation Actions

觸發(fā)路由改變

擁有方法如下:

  • Navigate:導(dǎo)航到新路由
  • Reset: 替換當(dāng)前的 State
  • Back: 返回之前的 State
  • Set Params: 設(shè)置給定路由的參數(shù)
  • Init:如果 state 沒定義银伟,則初始化第一個(gè) state

栗子

NavigationActions.back()
NavigationActions.navigate({ routeName: 'Login' }),

通常返回結(jié)果被 dispatch 調(diào)用

this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'Login' }))

Custom Navigation

const { routes, index } = state;

// 根據(jù)當(dāng)前狀態(tài)找到 Component
const Component = MyRouter.getComponentForState(state);

// 根據(jù) State 找到 active child Screen
let childNavigation = {dispatch, state: routes[index]}

// 使用addNavigationHelpers 來增加導(dǎo)航路徑你虹,方便使用 navigator 調(diào)用
childNavigation = addNavigationHelpers(childNavigation)

<Component navigation={childNavigation} />

API for building custom navigators

createNavigator

將 router 和 navigation view 綁定在一起, 使得該視圖層擁有一個(gè) router 的屬性

等同于

const MyApp = ({ navigation }) => (
   <MyView router={MyRouter} navigation={navigation} />
MyApp.router = MyRouter
)

addNavigationHelpers

用來創(chuàng)建 actions ,并被 dispatch 調(diào)用

createNavigationContainer

使得導(dǎo)航行為就像是頂級(jí)的導(dǎo)航,用于管理 state 并整合 app-level 級(jí)別的功能, 而不需要將 navigation 通過 props傳遞給最外層

const CustomTabs = createNavigationContainer(
  createNavigator(CustomTabRouter)(CustomTabView)
);

Routers

Custom Router API

getStateForAction(action, state)
當(dāng)發(fā)生 dispatch 或 navigaiton.navigate 時(shí)被調(diào)用彤避,通常返回一個(gè)新的 state

{
  index: 1,
  routes: [
    { key: 'A', routeName: 'Foo' },
    { key: 'B', routeName: 'Bar' },
  ],
}

getComponentForRouteName(routeName)
根據(jù) routeName 返回對(duì)應(yīng)的 component

router.getComponentForRouteName('Foo')

getComponentForState(state)
返回當(dāng)前的 component

getActionsForPathAndParams(path, params)
返回一個(gè) action, 當(dāng)再次回到該路由下時(shí)會(huì)被用到

getScreenOptions(navigation, screenProps)

const screenNavigation = addNavigationhelpers({
   state: navigation.state.routes[navigation.state.index],
   dispatch: navigation.dispatch
})

const options = this.props.router.getScreenOptions(
   screenNavigation,
   {}
)

const title = options.title

StackRouter

管理 navigation stack

const MyApp = StackRouter({
   Home: {
     screen: HomeScreen,
     path,
     getScreen // Set a lazy getter for a screen
   },
   Profile: {
     screen: ProfileScreen
   }, {
    initialRouteName: 'Home',
    initialRouteParams,
    paths
   }
})

TabRouter

const MyApp = TabRouter({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
}, {
  initialRouteName: 'Home',
  order,
  paths,
  backBehavior
})

Views

Built in Views

  • CardStack
    • Card
    • Header
  • Tabs
  • Drawer
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末傅物,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子琉预,更是在濱河造成了極大的恐慌董饰,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件圆米,死亡現(xiàn)場(chǎng)離奇詭異卒暂,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)榨咐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門介却,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人块茁,你說我怎么就攤上這事齿坷。” “怎么了数焊?”我有些...
    開封第一講書人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵永淌,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我佩耳,道長(zhǎng)遂蛀,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任干厚,我火速辦了婚禮李滴,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蛮瞄。我一直安慰自己所坯,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開白布挂捅。 她就那樣靜靜地躺著芹助,像睡著了一般。 火紅的嫁衣襯著肌膚如雪闲先。 梳的紋絲不亂的頭發(fā)上状土,一...
    開封第一講書人閱讀 52,821評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音伺糠,去河邊找鬼蒙谓。 笑死,一個(gè)胖子當(dāng)著我的面吹牛退盯,可吹牛的內(nèi)容都是我干的彼乌。 我是一名探鬼主播泻肯,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼慰照!你這毒婦竟也來了灶挟?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤毒租,失蹤者是張志新(化名)和其女友劉穎稚铣,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體墅垮,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡惕医,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了算色。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片抬伺。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖灾梦,靈堂內(nèi)的尸體忽然破棺而出峡钓,到底是詐尸還是另有隱情,我是刑警寧澤若河,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布能岩,位于F島的核電站,受9級(jí)特大地震影響萧福,放射性物質(zhì)發(fā)生泄漏拉鹃。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一鲫忍、第九天 我趴在偏房一處隱蔽的房頂上張望膏燕。 院中可真熱鬧,春花似錦悟民、人聲如沸煌寇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至腻脏,卻和暖如春鸦泳,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背永品。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工做鹰, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人鼎姐。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓钾麸,卻偏偏與公主長(zhǎng)得像更振,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子饭尝,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容