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

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

欢迎大家关注一下 基于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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值