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

Question

由于 flex: 1 样式，react-native-tab-view 不可见、未显示在屏幕上或无法工作，我们必须在父视图内提供 flex: 1 样式，否则它不会显示在屏幕上。

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

解决方案 ：-

第一次前。使用默认标签栏 -

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

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

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