在React-Native for JavaScript中将背景图像添加到滚动视图

tkqqtvp1 于 2022-11-17 发布在 React

关注(0)|答案(3)|浏览(153)

我有这个<ScrollView />

<ScrollView
        style={styles.scrollview}>
        {route.params && route.params....map((cat, index) => {
            return <Kitten
                cat={cat}
                key={index} />
        })}
    </ScrollView >

const styles = StyleSheet.create({
    scrollview: {
        paddingLeft: 15,
        paddingRight: 15,
        backgroundColor: 'white',
        flex: 1,
    },
});

我想把这个<BackgroundImage />放进去。

import { ImageBackground } from 'react-native';

const image = require('...')

const Kittens = ({ children }) => {
    return <ImageBackground
        source={image}
        resizeMode='repeat'
        style={{ width: '100%', height: '100%' }}>
        {children}
    </ImageBackground>
}

我希望背景图片是固定的，这样内容就可以滚动到图片上。我还需要填充整个屏幕。我该怎么做呢？

react-native

来源：https://stackoverflow.com/questions/73424862/add-backgroundimage-to-scrollview-in-react-native-for-javascript

3条答案

按热度按时间

brvekthn1#

使用滚动视图作为ImageBackground的子级

<ImageBackground
source={{uri://image url here}}
style={{
}}
>
<ScrollView
      style={styles.scrollview}
      contentContainerStyle={}
    >
      {route.params && route.params....map((cat, index) => {
          return <Kitten cat={cat} key={index} />
      })}
    </ScrollView >
</ImageBackground>

赞(0）回复(0）举报 2022-11-17

zu0ti5jz2#

如果Kittens的父对象填充了整个屏幕，那么移除white backgroundColor应该会起作用。您可以使用resizeMode来获得最佳的图像效果。

<Kittens>
  <ScrollView
      style={styles.scrollview}>
      {route.params && route.params....map((cat, index) => {
          return <Kitten cat={cat} key={index} />
      })}
    </ScrollView >
</Kittens>

const styles = StyleSheet.create({
    scrollview: {
        paddingLeft: 15,
        paddingRight: 15,
        //backgroundColor: 'white',
        flex: 1,
    },
});

赞(0）回复(0）举报 2022-11-17

whlutmcx3#

<ImageBackground
source={{uri:image url}}
style={{height:"100%", width:"100%"}}
>
<ScrollView
      contentContainerStyle={flexGrow:1}
    >
    <View style={{flex:1}} >

    </View>
    </ScrollView >
</ImageBackground>

赞(0）回复(0）举报 2022-11-17

我来回答

在React-Native for JavaScript中将背景图像添加到滚动视图

3条答案

相关问题

热门标签

最新问答