我在屏幕中间放置了一个标签导航器。它在标签导航器上方没有其他组件。我需要scrollView作为父组件,因为我需要垂直滚动选项卡导航器以及屏幕中的其他组件。但是,如果选项卡导航器的父组件是ScrollView,则它将停止工作。
https://snack.expo.io/@codebyte99/tab-navigator-in-scrollview-test
代码:
export default class App extends React.Component {
render() {
return (
<ScrollView> //if ScrollView is removed, it works.
<View style={{ flex: 1, marginTop: 50 }}>
<Card>
<AssetExample />
</Card>
<DetailTab />
</View>
</ScrollView>
);
}
}
标签导航:
const DetailTab = createMaterialTopTabNavigator({
Info: Home,
Menu: Home,
Review: Home,
},
{
defaultNavigationOptions: ({ navigation }) => ({
}),
tabBarOptions: {
activeTintColor: 'blue',
inactiveTintColor: '#80868B',
activeBackgroundColor: 'transparent',
inactiveBackgroundColor: 'transparent',
labelStyle: {
fontSize: 12,
},
tabStyle: {
paddingBottom: 10,
paddingTop: 10,
backgroundColor: 'transparent',
},
style: {
backgroundColor: 'white',
},
indicatorStyle: {
backgroundColor: 'blue'
}
},
}
);
export default createAppContainer(DetailTab);