Screen

表示一个屏幕界面

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

Screen Navigation Options

• 静态定义方法。写法同上。
• 动态定义方法。

static navigationOptions = ({ navigation, screenProps, navigationOptions }) => ({ 
   title: navigation.state.params.name,
   headerRight: <Button color={screenProps.tintColor} />
})

API Definition

{
   title,
   header, // null 时不展示屏幕的头部
   headerTitle,
   headerBackTitle,
   headerTruncatedBackTitle,
   headerRight,
   headerLeft,
   headerStyle,
   headerTitleStyle,
   headerBackTitleStyle,
   headerPressColorAndroid,
   getturesEnabled
}

Navigator

将多个屏幕层叠起来，定义各个屏幕界面之间的逻辑

StackNavigator

从一个屏幕跳转到下一个屏幕，定义多个相互关联的屏幕。

API Definition：

StackNavigator(RouteConfigs, StackNavigatorConfig)

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

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

举个栗子：

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

TabNavigator

关联多个 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
}

举个栗子

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

DrawerNavigator

定义一个抽屉列表

API Definition

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

// RouteConfig 同 StackNavigator

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

举个栗子

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

每个 Screen 都会接收到 一个 navigation Props, 如下：

this.props.navigation : {
   navigate: {
      routeName,
      params,
      action
   }, // 导航到其他 Screen
   state: {
      index, 
      routes: [{
          routeName,
          key,
          params
      }]
 },// Screen 当前的 state 或 route
   setParams, // 改变路由中的参数
   goBack, // 返回到上一屏
   dispatch // 向路由发出 Action
}

navigator 也有 navigation 属性，但可能只有 state, 和 dispatch 两个属性，

Navigation Actions

触发路由改变

拥有方法如下：

• Navigate：导航到新路由
• Reset: 替换当前的 State
• Back: 返回之前的 State
• Set Params: 设置给定路由的参数
• Init：如果 state 没定义，则初始化第一个 state

栗子

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

通常返回结果被 dispatch 调用

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

Custom Navigation

const { routes, index } = state;

// 根据当前状态找到 Component
const Component = MyRouter.getComponentForState(state);

// 根据 State 找到 active child Screen
let childNavigation = {dispatch, state: routes[index]}

// 使用addNavigationHelpers 来增加导航路径，方便使用 navigator 调用
childNavigation = addNavigationHelpers(childNavigation)

<Component navigation={childNavigation} />

API for building custom navigators

createNavigator

将 router 和 navigation view 绑定在一起, 使得该视图层拥有一个 router 的属性

等同于

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

addNavigationHelpers

用来创建 actions ,并被 dispatch 调用

createNavigationContainer

使得导航行为就像是顶级的导航，用于管理 state 并整合 app-level 级别的功能, 而不需要将 navigation 通过 props传递给最外层

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

Routers

Custom Router API

getStateForAction(action, state)
当发生 dispatch 或 navigaiton.navigate 时被调用，通常返回一个新的 state

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

getComponentForRouteName(routeName)
根据 routeName 返回对应的 component

router.getComponentForRouteName('Foo')

getComponentForState(state)
返回当前的 component

getActionsForPathAndParams(path, params)
返回一个 action, 当再次回到该路由下时会被用到

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