这篇文章主要的内容是自定义的navigator，因为在某些情况下，默认的StackNavigator和TabNavigator无法满足需求（TabNavigator在android环境下默认是基于scrollView的滚动样式，会导致一些第三方组件无法正常运行，并且也不好修改）,所以就需要我们按照自己的想法来自定一个navigator。
Custom Navigators
一个导航器可以是一个任何拥有router的React组件，下面是一个简单的例子:
class MyNavigator extends React.Component {
static router = MyRouter;
render() {
const { state, dispatch } = this.props.navigation;
const { routes, index } = state;
// Figure out what to render based on the navigation state and the router:
const Component = MyRouter.getComponentForState(state);
// The state of the active child screen can be found at routes[index]
let childNavigation = { dispatch, state: routes[index] };
// If we want, we can also tinker with the dispatch function here, to limit
// or augment our children's actions
// Assuming our children want the convenience of calling .navigate() and so on,
// we should call addNavigationHelpers to augment our navigation prop:
childNavigation = addNavigationHelpers(childNavigation);
return 自己模仿示例代码自定义了一个TabBar
/**
* Created by Guodada on 2017/3/2.
*/
import React from 'react';
import {
Button,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
Dimensions,
TouchableHighlight,
} from 'react-native';
import {
createNavigator,
createNavigationContainer,
TabRouter,
addNavigationHelpers,
} from 'react-navigation';
//导入界面
import Home from './Home/Home';
import Find from './Find/Find';
import Me from './Me/Me';
import Contacts from './Contacts/Contacts';
const {width,height} = Dimensions.get('window');
//设置每个标签
const CustomTabBar = ({
navigation
}) => {
console.log('TabBar navigation ============'+ navigation.state.index);
const {routes} = navigation.state;
let selectedIndex = navigation.state.index;
let isSelected = false;
return (
{
routes.map((route,index) =>{
//如果当前选中该index的router
selectedIndex === index?isSelected = true:isSelected = false;
//显示不同外观
let textColor = isSelected?'blue':'gray';
return (
{
navigation.navigate(route.routeName);
}}
key={route.routeName}
style={styles.tab}
>
{route.routeName}
)
})}
);
};
//设置TabBar
const CustomTabView = ({
router,
navigation
}) => {
console.log('navigation ============>>>>>'+ navigation.state.index);
const {routes,index} = navigation.state;
const ActiveScreen = router.getComponentForState(navigation.state);
return (
);
};
//自定义导航路由
const CustomTabRouter = TabRouter({
Home:{
screen:Home,
},
Me:{
screen:Me,
},
Contacts:{
screen:Contacts,
},
Find:{
screen:Find,
},
}, {
initialRouteName:'Home'
}
);
//创建自定义TabBar
const CustomTabs = createNavigationContainer(createNavigator(CustomTabRouter)(CustomTabView));
const styles = StyleSheet.create({
container: {
flex:1,
justifyContent:'center'
},
tabContainer: {
flexDirection: 'row',
height: 48,
borderTopWidth:1,
borderColor:'lightgray'
},
tab: {
flex: 1,
alignItems: 'center',
justifyContent: 'flex-end',
margin: 4,
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 4,
}
});
export default CustomTabs;
文末彩蛋，传值方式
从前往后：
从后往前：