时间戳

首页 > 解决方案 > 如何将图像视图保持在同一个位置，但图像本身在不同的位置。反应原生

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

问题描述

  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)"
  }
});

问题图片

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

标签： cssimagereact-native

解决方案

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

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

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

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

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

在 React Native 中创建视差图像

推荐阅读