Question

我正在尝试在代码下面使用React Native中的ScrollView组件，但没有成功：

const width_proportion = '97%';
const height_proportion = '75%';

const styles = StyleSheet.create({
    container: {
        height: '100%'
    },
    image: {
        flex: 1,
        resizeMode: "cover",
        justifyContent: "center"
    },
    text: {
        color: "grey",
        fontSize: 30,
        fontWeight: "bold"
    },
    popup: {
        color: '#CA0',
    },
    box: {
        width: width_proportion,
        height: height_proportion,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'steelblue',
        // position: "absolute",
        marginTop: '5%',
        marginBottom: '3%',
        marginLeft: '2%'
    },
    bottomBox: {

        width: '97%',
        height: 125,
        backgroundColor: 'steelblue',
        marginLeft: '2%',
        marginBottom: 10,
        marginTop: 5,
        padding: 5
    }
});

const MyTheme = {

    colors: {
        ...DefaultTheme.colors,
        background: '#EFA',
        primary: '#000',
        text: '#000',
    },
};

function HomeScreen({ navigation }) {
    return (
        <View style={styles.container}>
            <View style={{ width: '100%', height: 50, backgroundColor: 'steelblue' }}>
                <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
                    <Image source={hamburgerMenu} style={{ height: 45, width: 45, alignItems: 'center' }}>
                    </Image>
                </TouchableOpacity>
            </View>

            <ImageBackground source={imgBackground} style={styles.image}>

            <View style={styles.box}>
                </View>

            <ScrollView horizontal={true} >
                <View style={styles.bottomBox}>
                </View>
                <View style={styles.bottomBox}>
                </View>
                <View style={styles.bottomBox}>
                </View>
            </ScrollView>

            </ImageBackground>

        </View >

    );
}

当我将horizontal的{{1}}属性设置为“ true”时，该组件消失了。只有我将ScrollView设置为“ false”，并且horizontal在Vertical中的工作正常。

Answer 1

像这样包装您的滚动视图

<ScrollView horizontal={true}>
    <View style={styles.bottomBox} />
    <View style={styles.bottomBox} />
    <View style={styles.bottomBox} />              
</ScrollView>

bottomBox : {
    width: 40,
    height: 125,
    backgroundColor: 'steelblue',
    padding: 5,
    marginRight: 10,
}

为什么我的水平ScrollView无法正常工作？

1 个答案: