有一个固定的 <ImageBackground> 在我滚动时不会自行移动

Question

我想要一个占据所有屏幕并在我滚动时保持静止的背景图像。

我在 React Native 项目中有这个组件：

<ImageBackground`     style={styles.backgroundImage}
 source={require('../assets/images/Fondo1b.jpg')}>
 ....
</ImageBackground>

它正在包装另一个组件，它具有这种风格：

  backgroundImage: {
    flex: 1,
    resizeMode: 'cover',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height
  },

当我上下滚动时，它会随着屏幕移动： GIF link

在这里你可以看到它是如何随着卷轴移动的。

我需要它保持静止并占据屏幕大小，在我滚动时不移动并且不移动我的 FAB（它是 Native Base 的 FAB，它有帮助...）请问有什么建议吗？

Answer 1

看看这个。 React Native 正是需要这个

https://medium.com/azimuth/adding-a-static-background-for-react-native-scrollview-79aa6b43e314

<ImageBackground style={styles.backgroundImage}/>  


  backgroundImage: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: -1
  },

有一个固定的 <ImageBackground> 在我滚动时不会自行移动

Have a fixed <ImageBackground> that doesn't displace itself when I scroll

css

flexbox

reactjs

react-native

imagebackground