Horizontal ScrollView 在底部有一个空的 space

Question

我正在尝试通过以下代码制作水平滚动视图：

<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={{flex:1, backgroundColor:'#ff00ff'}}>
                    <Text>MauMau </Text>
                    <Text>MauMau </Text>
                    <Text>MauMau </Text>
                    <Text>MauMau </Text>
                    <Text>MauMau </Text>
                    <Text>MauMau </Text>
                    <Text>MauMau </Text>
                    <Text>MauMau </Text>
                    <Text>MauMau </Text>
                </ScrollView>

但底部有一个空的 space，如 image

那么，你能告诉我为什么我们有这个 space 以及如何摆脱它吗？

更新 2022/05/27

只需更新我的源代码，我尝试在水平方向自定义 Tabbar（因为 Material 顶部选项卡中的某些点不符合我的设计）如下所示：

import React from 'react'
import { View, Text, TouchableOpacity, ScrollView } from 'react-native'
function CustomWidthTabsHeader({ state, descriptors, navigation }) {
    const scrollRef = React.useRef();
    const listOffset = []
    const listWidth = []
    const [listItemOffsetX, setListItemOffsetX] = React.useState(listOffset);
    const [listItemWidth, setListItemWidth] = React.useState(listWidth);
    const [scrollViewWidth, setScrollViewWidth] = React.useState(0);
    const [scrollViewOffsetX, setScrollViewOffsetX] = React.useState(0);
    return (
            <ScrollView
                ref={scrollRef} horizontal={true}
                showsHorizontalScrollIndicator={false}
                onScroll={event=>{
                    setScrollViewOffsetX(event.nativeEvent.contentOffset.x)
                }}
                onLayout={event => {
                    const layout = event.nativeEvent.layout;
                    setScrollViewWidth(layout.width)
                }}>
                {state.routes.map((route, index) => {
                    const { options } = descriptors[route.key];
                    const label =
                        options.tabBarLabel !== undefined
                            ? options.tabBarLabel
                            : options.title !== undefined
                                ? options.title
                                : route.name;
                    const badge = options.tabBarBadge
                    const isFocused = state.index === index;

                    const onPress = () => {
                        const event = navigation.emit({
                            type: 'tabPress',
                            target: route.key,
                        });

                        if (!isFocused && !event.defaultPrevented) {
                            console.log("MauMau scrollview offsetX: " + scrollViewOffsetX + " Width: " + scrollViewWidth)
                            if (listItemOffsetX[index]<scrollViewOffsetX){
                                console.log("MauMau move to offsetX: " + listItemOffsetX[index] + " offsetY: " + index)
                                scrollRef.current.scrollTo({ x: listItemOffsetX[index], y: 0, animated: true })
                            } else if ((listItemOffsetX[index] +listItemWidth[index])>(scrollViewOffsetX +scrollViewWidth)){
                                scrollRef.current.scrollTo({ x: (listItemOffsetX[index] +listItemWidth[index]- scrollViewWidth), y: 0, animated: true })
                            }
                            
                            navigation.navigate(route.name);
                        }
                    };

                    const onLongPress = () => {
                        navigation.emit({
                            type: 'tabLongPress',
                            target: route.key,
                        });
                    };

                    return (
                        <TouchableOpacity
                            accessibilityRole="button"
                            accessibilityStates={isFocused ? ['selected'] : []}
                            accessibilityLabel={options.tabBarAccessibilityLabel}
                            testID={options.tabBarTestID}
                            onPress={onPress}
                            key={index}
                            onLongPress={onLongPress}
                            onLayout={event => {
                                const layout = event.nativeEvent.layout;
                                listOffset.push(layout.x)
                                listWidth.push(layout.width)
                                setListItemOffsetX(listOffset)
                                setListItemWidth(listWidth)
                                console.log("MauMau set listOffset: " + listOffset)
                            }}
                            style={{ alignItems: "flex-start", height: 35, borderBottomColor: '#F96300', borderBottomWidth: isFocused ? 4 : 0 }}
                        >
                            <Text style={{
                                color: isFocused ? '#F96300' : '#BDBDBD',
                                borderRadius: isFocused ? 8 : 0,
                                backgroundColor: 'transparent',
                                paddingVertical: 6,
                                paddingHorizontal: 12,
                                fontSize: 16,
                                fontWeight: '600'
                            }}>
                                {label}
                            </Text>
                            {badge > 0 ? <Text style={{
                                position: 'absolute',
                                right: -5,
                                top: -5,
                                width: 20,
                                height: 20,
                                borderRadius: 10,
                                backgroundColor: '#F96300',
                                textAlign: 'center',
                                color: '#fff'
                            }}>{badge}</Text> : null}
                        </TouchableOpacity>
                    );
                })}
            </ScrollView>

    );
}
export default CustomWidthTabsHeader

Answer 1

我找到了解决此问题的方法，方法是将 ScrollView 放入如下视图：

 <View>
                <ScrollView
                    ....>
                </ScrollView>
 </View>

Horizo​​ntal ScrollView 在底部有一个空的 space

Horizontal ScrollView have a empty space in bottom

react-native

Horizontal ScrollView 在底部有一个空的 space