如何将图像视图保持在同一个位置，但图像本身在不同的位置。反应原生答案

【问题标题】：How to keep image view in same place, but image itself in different position. Reac Native如何将图像视图保持在同一个位置，但图像本身在不同的位置。反应原生
【发布时间】：2018-08-31 14:40:43
【问题描述】：

  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.activeIndi}>
          <ActivityIndicator />
        </View>
      );
    } else {
      let date = moment().format("dddd, MMMM Do YYYY"); // August 29th 2018, 11:12:55 pm // Wed, Aug 29, 2018 11:05 PM
      let launches = this.state.dataSource.map((item, key) => {
        return (
          <View key={key}>
            <View style={styles.homeContainer}>
              <Text style={styles.homeText}>Home</Text>
              <View style={styles.dateContainer}>
                <Text style={styles.dateText}>{date}</Text>
              </View>
            </View>

            <View style={styles.launchBackground}>
              <Text style={styles.launchText}>
                Launching Soon: {item.missions[0].name}
              </Text>
            </View>
            <Image
              style={{
                width: "100%",
                height: 300
              }}
              source={{
                uri: item.rocket.imageURL
              }}
            />
          </View>
        );
      });
      return <View>{launches}</View>;
    }
  }
}

const styles = StyleSheet.create({
  activeIndi: {
    marginTop: "80%"
  },
  dateContainer: {
    marginTop: "11.5%"
  },
  dateText: {
    fontWeight: "bold",
    color: "#383838"
  },
  homeContainer: {
    width: "100%",
    height: "16%",
    backgroundColor: "white",
    alignItems: "center",
    shadowColor: "grey",
    shadowOpacity: 0.5,
    shadowRadius: 3,
    shadowOffset: { width: 0, height: -1 }
  },
  homeText: {
    fontWeight: "bold",
    color: "#383838",
    fontSize: 18,
    textAlign: "left",
    position: "absolute",
    bottom: 20
  },
  launchText: {
    marginTop: "1%",
    fontSize: 20,
    textAlign: "left",
    left: "3%",
    color: "#383838",
    fontWeight: "bold"
  },
  launchBackground: {
    height: 35,
    borderWidth: 0.5,
    borderRadius: 1,
    borderColor: "rgba(249, 249, 249,.6)"
  }
});

我遇到的问题是我想将图像框架保持在同一个位置，但图像本身处于不同的位置，这样你就可以看到火箭的顶部。我尝试使用转换工具，但没有奏效。我也尝试下载一个裁剪包，但这毁了我的整个项目。

【问题讨论】：

您是否尝试过将您的 Image 组件嵌套在 View 中，给它您想要的 height 和 width 并使用对齐来显示您想要的图像的确切部分？跨度>
我没有，我试试看

标签： css image react-native

【解决方案1】：

我不完全确定你想要什么，但从外观上看，感觉就像你想要一个视差图像。那里有很多图书馆，快速搜索一下就找到了其中之一：

https://github.com/danny8903/react-native-parallax-background

https://github.com/i6mi6/react-native-parallax-scroll-view

我个人没有使用过它们，但它们似乎是最新的，带有简单的入门说明。试一试。

或者你可以看看这个手动为你做的答案

Creating a parallax image in React Native

【讨论】：