React-native IT喵喵~路由之React Navigation

来源：互联网发布：c语言入门视频教程编辑：程序博客网时间：2024/05/21 03:57

大家自己去看文档吧！！！为了业务快把文档看完了。。。不过给大家翻译了一点。。。

欢迎大家关注一下基于React-naive开发的“IT喵~”项目。技能GET、互联网资讯、程序员相亲、GitHub监控。。。 Github地址：https://github.com/cbamls/kitty_front

效果图

这里写图片描述

内置的Navigators

起react-navigation 包含了下列三种函数赖创建navigators

StackNavigator 一次性渲染一个screen，或者提供screen之间的转换，当打开一个新的screen会被放到栈顶
TabNavigator 渲染一个tab bar 使得用户在screen之间切换
DrawerNavigator 提供了一种“抽屉”模型，用在滑入或退出screen中

使用Navigators渲染screen

navigators渲染的应用screen实质上是一个个的React组件
- Screen navigation prop 允许screen分发navigation事件，比如打开另一个screen
- ScreennavigationOptions 用来个性化Screen如何被navigator展现（使用header， title， tab label）

StackNavigator

class MyHomeScreen extends React.Component {  static navigationOptions = {    title: 'Home',  }  render() {    return (      <Button        onPress={() => this.props.navigation.navigate('Profile', {name: 'Lucy'})}        title="Go to Lucy's profile"      />    );  }}const ModalStack = StackNavigator({  Home: {    screen: MyHomeScreen,  },  Profile: {    path: 'people/:name',    screen: MyProfileScreen,  },});

API 定义

StackNavigator(RouteConfigs, StackNavigatorConfig)

RouteConfigs

StackNavigator({  Profile: {    //`ProfileScreen`是一个React component组件    screen: ProfileScreen,    // 当`ProfileScreen` 被 StackNavigator加载, 他会被默认传递一个 `navigation` 属性.    path: 'people/:name',    // 传递action和路由参数    // Optional: 覆盖`ProfileScreen`的 `navigationOptions`     navigationOptions: ({navigation}) => ({      title: `${navigation.state.params.name}'s Profile'`,    }),  },  ...MyOtherRoutes,});

StackNavigatorConfig

initialRouteName 设置默认screen
initialRouteParams 初始路由的默认参数
navigationOptions 对于所有Screen的默认路由选项
paths 覆盖 route configs中设置的path集

TabNavigator

class MyHomeScreen extends React.Component {  static navigationOptions = {    tabBarLabel: 'Home',    // Note: By default the icon is only shown on iOS. Search the showIcon option below.    tabBarIcon: ({ tintColor }) => (      <Image        source={require('./chats-icon.png')}        style={[styles.icon, {tintColor: tintColor}]}      />    ),  };  render() {    return (      <Button        onPress={() => this.props.navigation.navigate('Notifications')}        title="Go to notifications"      />    );  }}class MyNotificationsScreen extends React.Component {  static navigationOptions = {    tabBarLabel: 'Notifications',    tabBarIcon: ({ tintColor }) => (      <Image        source={require('./notif-icon.png')}        style={[styles.icon, {tintColor: tintColor}]}      />    ),  };  render() {    return (      <Button        onPress={() => this.props.navigation.goBack()}        title="Go back home"      />    );  }}const styles = StyleSheet.create({  icon: {    width: 26,    height: 26,  },});const MyApp = TabNavigator({  Home: {    screen: MyHomeScreen,  },  Notifications: {    screen: MyNotificationsScreen,  },}, {  tabBarOptions: {    activeTintColor: '#e91e63',  },});

阅读全文

0 0