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 ( 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 }) => (require('./chats-icon.png')}style={[styles.icon, {tintColor: tintColor}]}/>),};render() {return ( this.props.navigation.navigate('Notifications')}title="Go to notifications"/>);}
}class MyNotificationsScreen extends React.Component {static navigationOptions = {tabBarLabel: 'Notifications',tabBarIcon: ({ tintColor }) => (require('./notif-icon.png')}style={[styles.icon, {tintColor: tintColor}]}/>),};render() {return ( 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',},
});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！