react-native-android(react navigation)
主要写法参考官方文档
主要构成
按使用形式主要分三部分:
1 StackNavigator: 类似于普通的Navigator，屏幕上方导航栏
2 TabNavigator: 相当于iOS里面的TabBarController，屏幕下方的标签栏
3 DrawerNavigator: 抽屉效果，侧边滑出
一、StackNavigator 导航栏
API: StackNavigator(RouteConfigs, StackNavigatorConfig) //注册导航
navigationOptions：配置StackNavigator的一些属性。 title：导航栏的标题，如果设置了这个导航栏和标签栏的title就会变成一样的，不推荐使用 header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null headerTitle：设置导航栏标题，推荐 headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回" headerRight：设置导航条右侧。可以是按钮或者其他视图控件 headerLeft：设置导航条左侧。可以是按钮或者其他视图控件 headerStyle：设置导航条的样式。背景色，宽高等 headerTitleStyle：设置导航栏文字样式 headerBackTitleStyle：设置导航栏‘返回’文字样式 headerTintColor：设置导航栏颜色 headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0 gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭 screen：对应界面名称，需要填入import之后的页面 mode：定义跳转风格 card：使用iOS和安卓默认的风格 modal：iOS独有的使屏幕从底部画出。类似iOS的present效果 headerMode：返回上级页面时动画效果 float：iOS默认的效果 screen：滑动过程中，整个页面都会返回 none：无动画 cardStyle：自定义设置跳转效果 transitionConfig： 自定义设置滑动返回的配置 onTransitionStart：当转换动画即将开始时被调用的功能 onTransitionEnd：当转换动画完成，将被调用的功能 path：路由中设置的路径的覆盖映射配置 initialRouteName：设置默认的页面组件，必须是上面已注册的页面组件 initialRouteParams：初始路由参数
const SimpleStack = StackNavigator({ Home: { screen: MyHomeScreen, }, Profile: { path: 'people/:name', screen: MyProfileScreen, }, Photos: { path: 'photos/:name', screen: MyPhotosScreen, } }, {//如果标题栏一样可以将navigationOptions移动到和StackNavigatorConfig这个对象内 navigationOptions: { //屏幕导航的默认选项,也可以在组件内用static navigationOptions 设置(会覆盖此处的设置) // 导航栏的标题 headerTitle:'123', // ios // headerBackTitle:'123', headerStyle:{ backgroundColor: 'pink'}, headerTintColor:'green', cardStack: { gesturesEnabled: true } }, initialRouteName :'Profile' } );
二、TabNavigator 标签栏[ TabNavigator(RouteConfigs, TabNavigatorConfig) ]
RouteConfigs The route configs object is a mapping from route name to a route config, which tells the navigator what to present for that route. StackNavigator({ // For each screen that you can navigate to, create a new entry like this: Profile: { // `ProfileScreen` is a React component that will be the main content of the screen. screen: ProfileScreen, // When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop. // Optional: When deep linking or using react-navigation in a web app, this path is used: path: 'people/:name', // The action and route params are extracted from the path. // Optional: Override the `navigationOptions` for the screen
Screen Navigation Options : title Generic title that can be used as a fallback for headerTitle and tabBarLabel tabBarVisible True or false to show or hide the tab bar, if not set then defaults to true tabBarIcon #常用 React Element or a function that given { focused: boolean, tintColor: string } returns a React.Element, to display in tab bar tabBarLabel #常用 Title string of a tab displayed in the tab bar or React Element or a function that given { focused: boolean, tintColor: string } returns a React.Element, to display in tab bar. When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section
navigationOptions: ({navigation}) => ({
title: `${navigation.state.params.name}'s Profile'`,
}),
},
...MyOtherRoutes,
})
const Test_tabnavigator=TabNavigator( { Home:{ screen:HomeDetail, path:'home', navigationOptions: ({navigation}) => ({ title:'123', tabBarLabel: 'Home', // Note: By default the icon is only shown on iOS. Search the showIcon option below. tabBarIcon: ({ tintColor , focused}) => ( <Image source={focused?{uri:'icon_tabbar_homepage_selected'}:{uri:'icon_tabbar_homepage'}} style={[styles.icon]} /> ) }), },
TabNavigatorConfig:
title：标题，会同时设置导航条和标签栏的title tabBarVisible：是否隐藏标签栏。默认不隐藏(true) tabBarIcon：设置标签栏的图标。需要给每个都设置 tabBarLabel：设置标签栏的title。推荐 tabBarPosition：设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：'top'，'bottom'）
swipeEnabled：是否允许在标签之间进行滑动 animationEnabled：是否在更改标签时显示动画 lazy：是否根据需要懒惰呈现标签，而不是提前，意思是在app打开的时候将底部标签栏全部加载，默认false,推荐为true trueinitialRouteName： 设置默认的页面组件 backBehavior：按back 键是否跳转到第一个Tab(首页)， none 为不跳转 tabBarOptions：配置标签栏的一些属性iOS属性
tabBarOptions:
activeTintColor：label和icon的前景色 活跃状态下
inactiveTintColor：label和icon的前景色 不活跃状态下
activeBackgroundColor：label和icon的背景色 活跃状态下 用style:{backgroundColor:'red'}解决 inactiveBackgroundColor：label和icon的背景色 不活跃状态下
style：tabbar的样式
iconStyle：图标样式 style object for the tab icon
labelStyle：label的样式 style object for the tab label
indicatorStyle：标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题
tabStyle - style object for the tab
showLabel：是否显示label，默认开启
showIcon：是否显示图标，默认关闭
upperCaseLabel：是否使标签大写，默认为true pressColor：material涟漪效果的颜色（安卓版本需要大于5.0） pressOpacity：按压标签的透明度变化（安卓版本需要小于5.0） scrollEnabled：是否启用可滚动选项卡 tabStyle：tab的样式 tabBarOptions: {
// activeTintColor: Platform.OS === 'ios' ? '#e91e63' : 'pink', activeTintColor:'red', inactiveTintColor:'black', // 设置背景色 style: { backgroundColor: '#eee', }, // upperCaseLabel:false, // 是否显示标签 // showIcon:true, // 按下效果透明度 // pressOpacity:0.1 // 按下效果背景色 // pressColor:'blue' // 是否可以上下滑动 // scrollEnabled:false // 是否显示图标 showIcon:true, // 图标样式 // 给图标上部加间隔只能通过marginTop iconStyle:{ marginTop:5 }, // 标签样式可以通过marginTop设置上下距离,若要减下部空间只能先margin:0,marginTop:5 labelStyle: { fontSize: 12, margin:0, marginTop:5 },
// 下划线可以通过height:0消失 indicatorStyle:{height:2,backgroundColor:'red'}, inactiveBackgroundColor:'yellow' } }
三、DrawerNavigator 抽屉栏
DrawerNavigatorConfig drawerWidth - 抽屉的宽度 drawerPosition - 选项是左或右。 默认为左侧位置 contentComponent - 用于呈现抽屉内容的组件，例如导航项。 接收抽屉的导航。 默认为DrawerItems contentOptions - 配置抽屉内容
Example:
先要引用import { DrawerItems } from 'react-navigation';这样抽屉栏就可以设置为被scrollView包裹的可拉动的 Default the DrawerView isn't scrollable. To achieve a scrollable View, you have to use the contentComponent to customize the container, as you can see in the example below. { drawerWidth: 200, drawerPosition: 'right', contentComponent: props => <ScrollView><DrawerItems {...props} /></ScrollView> }
initialRouteName - 初始路由的routeName order - 定义抽屉项目顺序的routeNames数组。 路径 - 提供routeName到路径配置的映射，它覆盖routeConfigs中设置的路径。 backBehavior - 后退按钮是否会切换到初始路由？ 如果是，设置为initialRoute，否则为none。 默认为initialRoute行为 DrawerItems的contentOptions属性 activeTintColor - 活动标签的标签和图标颜色 activeBackgroundColor - 活动标签的背景颜色 inactiveTintColor - 非活动标签的标签和图标颜色 inactiveBackgroundColor - 非活动标签的背景颜色 内容部分的样式样式对象 labelStyle - 当您的标签是字符串时，要覆盖内容部分中的文本样式的样式对象
navigation 在StackNavigator中注册后的组件都有navigation这个属性. navigation又有5个参数:navigate, goBack, state, setParams, dispatch, 可以在组件下console.log一下this.props就能看到. this.props.navigation.navigate('Two', { name: 'two' }): push下一个页面 routeName: 注册过的目标路由名称 params: 传递的参数 action: 如果该界面是一个navigator的话，将运行这个sub-action this.props.navigation.goBack(): 返回上一页 this.props.navigation.state: 每个界面通过这去访问它的router，state其中包括了： routeName: 路由名 key: 路由身份标识 params: 参数 this.props.navigation.setParams: 该方法允许界面更改router中的参数，可以用来动态的更改导航栏的内容 this.props.navigation.dispatch: 可以dispatch一些action，主要支持的action有： Navigate: import { NavigationActions } from 'react-navigation' const navigationAction = NavigationActions.navigate({ routeName: 'Profile', params: {}, // navigate can have a nested navigate action that will be run inside the child router action: NavigationActions.navigate({ routeName: 'SubProfileRoute'}) }) this.props.navigation.dispatch(navigationAction) Reset: Reset方法会清除原来的路由记录，添加上新设置的路由信息, 可以指定多个action，index是指定默认显示的那个路由页面, 注意不要越界了 import { NavigationActions } from 'react-navigation' const resetAction = NavigationActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Profile'}), NavigationActions.navigate({ routeName: 'Two'}) ] }) this.props.navigation.dispatch(resetAction) SetParams: 为指定的router更新参数，该参数必须是已经存在于router的param中 import { NavigationActions } from 'react-navigation' const setParamsAction = NavigationActions.setParams({ params: {}, // these are the new params that will be merged into the existing route params // The key of the route that should get the new params key: 'screen-123', }) this.props.navigation.dispatch(setParamsAction)
参考：http://blog.csdn.net/sinat_17775997/article/details/70176688
http://blog.csdn.net/u013718120/article/details/72357698
浙公网安备 33010602011771号