Как сохранить изображение в том же месте, но само изображение в другом положении. Reac Native

Question

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

Проблема, с которой я столкнулся, заключается в том, что я хочу сохранить рамку изображения в том же месте, но само изображение в другом положении, чтобы вы могли видеть верх ракеты. Я пытался поиграть с инструментом трансформации, но это не сработало. Я также попытался загрузить пакет обрезки, но это разрушило весь мой проект.

Answer 1

Я не совсем уверен, что вы хотите, но, судя по всему, кажется, что вы хотите изображение параллакса. Есть много библиотек, быстрый поиск привел меня к одной из них:

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

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

Лично я не использовал их, но они, кажется, соответствуют современным инструкциям по началу работы. Дайте им шанс.

или вы можете посмотреть на этот ответ, который делает это вручную для вас

Создание изображения параллакса в React Native