在 react 导航中使用createMaterialTopTabNavigator,可以实现以下目的:
但是,我想将选项卡移动到页面标题栏下方和作业项目滑块轮播上方。我该如何实现?这是我的代码:
export const MaterialTabNavigation = createMaterialTopTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: "Home"
}
},
PopularJobs: {
screen: PopularJobs,
navigationOptions: {
tabBarLabel: "Popular"
}
},
Wishlist: {
screen: Wishlist,
navigationOptions: {
tabBarLabel: "Wishlist"
}
}
},
{
initialRouteName: 'Home',
tabBarOptions: {
activeTintColor: primaryColor,
inactiveTintColor: '#000000',
upperCaseLabel: false,
pressColor: '#efefef',
tabBarPosition: 'top',
indicatorStyle: {
backgroundColor: primaryColor,
height: 2,
},
labelStyle: {
fontSize: 15,
},
tabStyle: {
height: 32,
marginHorizontal: 15,
},
style: {
backgroundColor: '#ffffff',
borderBottomWidth: 0,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0,
shadowRadius: 0,
elevation: 0,
}
}
},
);
最佳答案
您不应该像Docs所说的那样导出createAppContainer(TabNavigator)
,而应该将createAppContainer(TabNavigator)
放在const中,并像React Component这样使用它,例如下面的代码:
export default class HomeScreen extends Component<{}> {
render () {
return (
<View>
// your other views
<TabLayout />
</View>
);
}
}
class OneScreen extends Component<{}> {
render () {
return (
<View>
<Text>One</Text>
</View>
);
}
}
class TwoScreen extends Component<{}> {
render () {
return (
<View>
<Text>Two</Text>
</View>
);
}
}
class ThreeScreen extends Component<{}> {
render () {
return (
<View>
<Text>Three</Text>
</View>
);
}
}
const TabNavigator = createMaterialTopTabNavigator({
One: {
screen: OneScreen,
navigationOptions: {
tabBarLabel: "One"
}
},
Two: {
screen: TwoScreen,
navigationOptions: {
tabBarLabel: "Two"
}
},
Three: {
screen: ThreeScreen,
navigationOptions: {
tabBarLabel: "Three"
}
}
},
);
const TabLayout = createAppContainer(TabNavigator);
关于android - 将“ Material 顶部标签导航器”放置在自定义位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53152284/