在标题 react-native 后面添加图像答案

【问题标题】：Adding a images behind header react-native在标题 react-native 后面添加图像
【发布时间】：2018-10-10 05:33:00
【问题描述】：

我想用刷卡器在标题后面添加多个图像。我尝试使用Native-base 和react-native-swiper 来实现它。但是，结果如下。

以下是我的代码

<View style={{flex:1, elevation:2}}>
                    <Swiper style={StyleSheet.flatten( {backgroundColor: '#fff'})}>
                    <ImageBackground
                        source={require('../../img/auth_background.png')}
                        style={this.styles.backgroundStyle}
                        imageStyle={this.styles.backgroundImage}
                    >
                        <Header style={{
                            marginTop: StatusBar.currentHeight,
                            backgroundColor: 'transparent',
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}>
                            <StatusBar
                                backgroundColor={Colors.statusBar}
                                barStyle="light-content"
                            />
                            <Left>
                                <Button transparent onPress={this.handleBackButtonClick} small={true}>
                                    <Icon name='ios-arrow-back' size={30} color={Colors.textWhite}/>
                                </Button>
                            </Left>
                            <Body/>
                            <Right/>
                        </Header>
                    </ImageBackground>
                        <ImageBackground
                            source={require('../../img/auth_background.png')}
                            style={this.styles.backgroundStyle}
                            imageStyle={this.styles.backgroundImage}
                        >
                            <Header style={{
                                marginTop: StatusBar.currentHeight,
                                backgroundColor: 'transparent',
                                justifyContent: 'center',
                                alignItems: 'center',
                                borderBottomWidth: 0, shadowOffset: {height: 0, width: 0},
                                shadowOpacity: 0, elevation: 0
                            }}>
                                <StatusBar
                                    backgroundColor={Colors.statusBar}
                                    barStyle="light-content"
                                />
                                <Left>
                                    <Button transparent onPress={this.handleBackButtonClick} small={true}>
                                        <Icon name='ios-arrow-back' size={30} color={Colors.textWhite}/>
                                    </Button>
                                </Left>
                                <Body/>
                                <Right/>
                            </Header>
                        </ImageBackground>
                    </Swiper>
</View>

我想修复标题，这样它就不会随图像一起滑动。谁能帮我这个？提前致谢。

【问题讨论】：

标签： react-native react-native-android native-base react-native-swiper

【解决方案1】：

android 中的 React-Native-Swiper 在 swiper 高度和宽度未显示时会显示空白内容。请添加固定的高度和宽度以查看或添加到滑动器

【讨论】：

【解决方案2】：

将您的Header 保持在Swiper 之外并使其位置absolute

<Header style={{
        marginTop: StatusBar.currentHeight,
        backgroundColor: 'transparent',
        justifyContent: 'center',
        alignItems: 'center',
        position:'absolute',
        top:0,
        left:0
}}>

【讨论】：

我试过这个，但是我根本没有看到标题
尝试给出高度和宽度，并确保在<Swiper>之后定义它，而不是在它之上
高度和宽度为<Swiper>?

【解决方案3】：

我使用zIndex 和position 找到了解决方案。我想在使用原生基础 header 和 container 和 zIndex 时会出现一些问题。

<View style={{flex: 1}}>
                    <View style={{flex:1, zIndex: 2, position: 'absolute', marginTop: StatusBar.currentHeight, marginLeft:'2%'}}>
                       <Button iconLeft transparent>
                               <Icon name='ios-arrow-back' size={30} color={Colors.textWhite}/>
                       </Button>
                    </View>
                    <View style={{width: '100%', height: '50%', zIndex: 1, position: 'absolute'}}>
                        <Swiper style={StyleSheet.flatten( {backgroundColor: '#fff',zIndex:1, flex:1})}>
                            <ImageBackground
                                source={require('../../img/auth_background.png')}
                                style={this.styles.backgroundStyle}
                                imageStyle={this.styles.backgroundImage}
                            >

                            </ImageBackground>
                            <ImageBackground
                                source={require('../../img/auth_background.png')}
                                style={this.styles.backgroundStyle}
                                imageStyle={this.styles.backgroundImage}
                            >
                            </ImageBackground>
                        </Swiper>
                    </View>

【讨论】：