react-native-tab-view不可见，不在屏幕上显示或无法工作

Question

react-native-tab-view是不可见的，不显示在屏幕上或不工作，因为flex: 1的样式，我们必须给flex: 1父视图的样式，否则它不会显示在屏幕上

参考:https://github.com/satya164/react-native-tab-view/blob/main/example/src/CustomTabBarExample.tsx

解决方案:

第一个带有默认TAB栏的示例-

import { StyleSheet, Text, View, useWindowDimensions } from 'react-native'
import React from 'react'
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
const BookingScreen = () => {
const layout = useWindowDimensions();
const FirstRoute = () => (
<View style={{ flex: 1, backgroundColor: '#ff4081' }} /> // here also writing flex: 1 is mandatory
);
const SecondRoute = () => (
<View style={{ flex: 1, backgroundColor: '#673ab7' }} /> // here also writing flex: 1 is mandatory
);

const [index, setIndex] = React.useState(0);
const [routes, setRoutes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
// first: FeedbackScreen,
// second: ProfileScreen,
});


return (
<>
<View style={{ flex: 1 }}> // wrtie flex: 1 inside parent view its mandatory ***

<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
/>


</View>
</>
)
}
export default BookingScreen

第二个带有自定义标签栏的例子-

import { StyleSheet, Text, View, useWindowDimensions } from 'react-native'
import React from 'react'
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

const BookingScreen = () => {

const [index, setIndex] = React.useState(0);
const [routes, setRoutes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);

const _renderTabBar = props => (
<TabBar
{...props}
style={{ backgroundColor: '#fafafa' }}
tabStyle={[styles.tab, { height: 38, maxHeight: 38, minHeight: 38, padding: 0 }]}
labelStyle={[styles.label, { color: colors.text, }]}
indicatorStyle={{ backgroundColor: 'blue' }}
/>
);

return (
<>
<View style={{ flex: 1 }}> // giving flex:1 inside parent view is mandatory


<TabView
navigationState={{ index, routes }}
renderTabBar={_renderTabBar}
onIndexChange={setIndex}
renderScene={({ route }) => {
switch (route.key) {
case 'first':
return (<>
<View style={{ flex: 1, backgroundColor: '#ff4081' }} > // giving flex:1 is mandatory otherwise content will not shown
<Text style={{ color: 'black' }}>sadfghjkljhgfcgvhbj</Text>
</View>
</>);
case 'second':
return (<>
<View style={{ flex: 1, backgroundColor: '#673ab7' }} > // giving flex:1 is mandatory otherwise content will not shown
<Text style={{ color: 'black' }}>sadfghjkljhgfcgvhbj</Text>
</View>
</>);
default:
return null;

}
}}
/>

</View>
</>
)
}
export default BookingScreen
const styles = StyleSheet.create({
label: {
fontWeight: '600',
// fontSize: 12,
flexWrap: 'wrap',
// color: Colors.text,
// minWidth: Dimensions.get('window').width < 375 ? '100%' : '60%'
},
})

Answer 1

对于将来的读者来说，一个常见的问题是父容器没有定义高度。

必须设置父容器高度，例如:

<View style={{height: "100%"}}> //or flex: 1
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
/>
</View>

Answer 2

我遇到了一个类似的问题，我的TabView位于ScrollView中。有趣的是，它在Expo Web上运行时没有问题，但在Android模拟器或设备上却不是这样。我发现的解决方案是从ScrollView中删除TabView。这就是它的全部-如果你的TabView包含在ScrollView中，你应该从那里提取它，或者将它封装在使用不同flexDirection的不同容器中。

Answer 3

删除父容器将解决此问题。

return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
/>
)