大家自己 去看文档吧！！！ 为了业务快把文档看完了。。。 不过给大家翻译了一点。。。
欢迎大家关注一下 基于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 设置默认screeninitialRouteParams 初始路由的默认参数navigationOptions 对于所有Screen的默认路由选项paths 覆盖 route configs中设置的path集
TabNavigator
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel:
'Home',
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',
},
});
