在使用 Expo 的 Web 上,<TabView> 中的 <Tab> 不可滚动。

import { Layout, List, StyleService, Tab, TabView, Text } from '@ui-kitten/components'; import React from 'react'; import { ScrollView } from 'react-native';

export const TabViewScreen = ({ navigation, }: { navigation: any; }): React.ReactElement => { const [selectedIndex, setSelectedIndex] = React.useState(0);

const renderItem = (item: any) => { return ( <Layout style={{ height: 200, backgroundColor: [ 'aqua', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'orange', 'purple', 'red', 'silver', 'teal', 'white', 'yellow', ][Math.floor(Math.random() * 15)], }} > {Math.random().toString()} ); };

return ( <TabView selectedIndex={selectedIndex} onSelect={(index) => setSelectedIndex(index)} tabBarStyle={{ height: 50 }} style={{ flexGrow: 1 }} // shouldLoadComponent={shouldLoadComponent} > <List scrollEnabled={true} scrollToOverflowEnabled={true} data={Array.from({ length: 7 })} renderItem={renderItem} > <Tab title="Other" style={{ flexGrow: 1 }}> <ScrollView contentContainerStyle={{ flexGrow: 1, paddingBottom: 200 }} style={{ flexGrow: 1 }} > <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'black' }}> <Layout style={{ height: 200, backgroundColor: 'blue' }}> <Layout style={{ height: 200, backgroundColor: 'lightblue' }}> <Layout style={{ height: 200, backgroundColor: 'lightgreen' }}> <Layout style={{ height: 200, backgroundColor: 'green' }}> <Layout style={{ height: 200, backgroundColor: 'pink' }}> <Layout style={{ height: 200, backgroundColor: 'orange' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 200, backgroundColor: 'purple' }}> <Layout style={{ height: 200, backgroundColor: 'gray' }}> <Layout style={{ height: 2