ReactNative:在*后面*滚动查看

我有一个视图(包含一个图标和一个文本,用作一个大复选框),它位于ScrollView上方,但是,ScrollView出现在视图的前面,并且文本也没有显示。 / p>

我尝试了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,});```

        <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',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} />
};
lwr82545744 回答:ReactNative:在*后面*滚动查看

我认为您只需要更改样式表中滚动视图和常规视图的z索引


export default StyleSheet.create({
    container: {
        zIndex: 2,flex: 1,alignItems: 'center',marginTop: 20,marginBottom: 20,backgroundColor: 'white',},scrollview: {
        zIndex: 1,width: '100%',paddingTop: 10,paddingBottom: 10,heading: {
        fontSize: 36,textAlign: 'center',marginLeft: 20,marginRight: 20,subheading: {
        fontSize: 20,});```
本文链接:https://www.f2er.com/3074047.html

大家都在问