将本地滑动背景图像与顶部的一些静态内容进行反应。

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/滑动图像。有人能帮忙吗？

Answer 1

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

所以，你可以做的是相同的，只需放置多个图像，或者像这样的父母：

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