ReactNative：View * behind * ScrollView

Question

我有一个视图（包含一个图标和文本，作为一个大复选框，它位于ScrollView上方，但是，ScrollView出现在视图的前面，并且文本也不显示。

我尝试了flex的每种组合，有时最终都占据了屏幕的一半。

图标/文本在其他屏幕上也可以正常工作。

this shows the view behind the scrollview, rather than neatly above it, with some margin.

this is what it looks like on another screen, fine with margins, etc.

export default StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        marginTop: 20,
        marginBottom: 20,
        backgroundColor: 'white',
    },
    scrollview: {
        width: '100%',
        paddingTop: 10,
        paddingBottom: 10,
    },
    heading: {
        fontSize: 36,
        textAlign: 'center',
        marginLeft: 20,
        marginRight: 20,
    },
    subheading: {
        fontSize: 20,
        textAlign: 'center',
        marginLeft: 20,
        marginRight: 20,
    },
});```

        <View style={ style.container }>

            <Text style={ style.heading }>{ this.state.list && this.state.list.name || 'My Gift List' }</Text>

            { this.state.list.date ? <Text style={ [ style.subheading, { marginTop: 5, marginBottom: 10 } ] }>{ formatDate( dateFromIso( this.state.list.date ), "%A %eth %B, %Y" ) }</Text> : null }

            <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 10, marginBottom: 20 }}>
                <Checkbox icon={ this.state.showTicked ? 'check' : null } onPress={ () => this.setState( { showTicked: ! this.state.showTicked } ) } />
                <Text style={{  marginLeft: 10 }} onPress={ () => this.setState( { multiple: ! this.state.multiple } ) }>I would like more than one</Text>
            </View>

            {
                this.state.list.items.length > 0 ?

                    <ScrollView style={ style.scrollview } >
                        <FlatList style={ { marginTop: 10, marginBottom: 50, width: "100%", borderTopColor: '#ddd', borderTopWidth: 1 } } data={ this.state.list.items } renderItem={ this.renderItem } />
                    </ScrollView>

                : null
            }

        </View>```

const Checkbox = args => {

    const props = Object.assign( {}, args );

    props.containerStyle = Object.assign( { width: 40 }, props.containerStyle || {} );

    props.buttonStyle = Object.assign( { backgroundColor: 'transparent', borderWidth: 1, borderColor: '#555', height: 40 }, props.buttonStyle || {} );

    if ( props.icon )
    {
        let iconProps = Object.assign( { type: 'font-awesome', name: props.icon , color: "#555555", size: 20 }, props.iconStyle || {} );;

        props.icon = <RNEIcon {...iconProps} />
    }

    return <RNEButton {...props} />
};

Answer 1

您只需要在样式表中更改滚动视图和常规视图的z索引，就可以使用>