React native - 滑动背景图像，顶部有一些静态内容

Question

ImageBackground 拍摄一张图像，我能够添加具有图像和一些文本的子视图。但是，我想要的是背景工作，就像图像的狂欢，而子视图保持原样，反应本机。有办法实现吗？

我现在拥有的:

<ImageBackground style= {styles.headerBackground} source={require('./img/headerBg.jpg')}>
    <View style={styles.top}>
        <Avatar
            small
            rounded
            icon={{name: 'menu'}}
            onPress={() => console.log("Works!")}
            activeOpacity={0.7}
        />               
    </View>
    <View style = {styles.header}>
        <Avatar
            large
            source={require('./img/profBg.jpg')}
            avatarStyle={{ borderWidth: 3, borderColor: 'white',  borderStyle:'solid' }}
            onPress={() => console.log("Works!")}
            activeOpacity={0.7}
        />
        <Text style={styles.name}>Name</Text>
        <Text style={styles.message}> Personal message</Text>
    </View>
</ImageBackground>

我不想在背景中放一张图片，而是 carousal/sliding 张图片。有人可以帮忙吗？

Answer 1

<ImageBackground> 只是一个 <View> 里面有 <Image style={{position:'absolute'}} />。来源 ImageBackground - https://github.com/facebook/react-native/blob/c6b96c0df789717d53ec520ad28ba0ae00db6ec2/Libraries/Image/ImageBackground.js#L63

所以你可以做的是一样的，只是放多张图片，也许 parent 像这样：

<View>
    <View style={{ position:'absolute' }}>
        <Image />
        <Image />
        <Image />
        <Image />
    </View>
</View>

React native - 滑动背景图像，顶部有一些静态内容

React native - Sliding background Images with some static content on top

android

ios

react-native

imagebackground