android - React Native - TabNavigator 在 Android 中的 ScrollView 中不工作

Question

我在 ScrollView 中有一个 TabNavigator，它在 ios 中工作正常，但在 android 中却不行。 TAB 内容不可见，单击选项卡不起作用。请参阅下面链接中的工作示例。

试过:

1. 为 ScrollView 添加 flex: 1 或高度。

2. 给标签添加 flex: 1 或高度。

   export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<TabNavigator/>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone!
Save to get a shareable url.
</Text>
<View>
<AssetExample/>
</View>
<ScrollView style={{height: 500}}>
<TabNavigator/>
</ScrollView>
</View>
);
}
}
const TabNavigator = createMaterialTopTabNavigator({
TabOne: Tab1,
TabTwo: Tab2,
}, {
tabBarOptions: {
activeTintColor: '#5B71F9',
inactiveTintColor: '#888888',
showIcon: false,
labelStyle: {
fontSize: 14
},
style: {
backgroundColor: '#fff',
shadowColor: '#fff',
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0,
shadowRadius: 0,
elevation: 0,
height: 47,
borderBottomWidth: 1,
borderBottomColor: '#E8E8E8'
},
indicatorStyle: {
height: 2,
backgroundColor: '#5B71F9'
}
}
});


范例: https://snack.expo.io/@15101668168/joyous-tortilla

Answer 1

这是预期的行为:

ios下和android下scrollview TabNavigator的内容都可以正常工作。使用页面的滚动和滚动创建 Material TopTabNavigator，而不是 TAB Pane 滚动。

例子: Example

引用: Reference for the answer