react-native-easy-gesture-new,想把所有图片缩放到一个比例

问题描述 投票:0回答:0

我想知道如何使所有图像的比例更改为用户更改的图像的比例?使用 react-native-easy-gestures-new,expo

onChange={(事件,样式)=> { 控制台日志(样式); }} 在规模端尝试此操作以获取样式,然后更新规模但不断收到错误 styles.transform[1] is unidentified

 {props.lastImages.slice(0, 5).map((lastImage, index) => {
        const left =
          index === 0
            ? Platform.OS === "android"
              ? 70
              : 50
            : 110 * index + 60;
        return (
          <Gestures
            key={index}
            scalable={{
              min: 0.4,
              max: 2,
            }}
            rotate="0deg"
            rotatable={false}
            onChange={() => {
              props.setSelectedImageIndex(index);
            }}
            onStart={() => {
              setMove(true);
            }}
            onEnd={() => {
              setMove(false);
            }}
          >
            <View>
              <Image
                source={{ uri: `data:image/jpeg;base64,${lastImage}` }}
                style={{
                  width: 150,
                  height: 320,
                  left: left,
                  top: Platform.OS === "android" ? -30 : -10,
                  position: "absolute",
                  opacity: 1,
                  opacity:
                    props.selectedImageIndex === index || !move ? 1 : 0.5,
                }}
                resizeMode="contain"
              />
              {!props.showTextInput ? (
                <Text
                  style={{
                    position: "absolute",
                    left: left + 65,
                    top: Platform.OS === "android" ? -20 : -15,
                    color: "white",
                    height:
                      textInputValues[index] &&
                      textInputValues[index].length > 0
                        ? 16
                        : 0,
                  }}
                >
                  {textInputValues[index]}
                </Text>
              ) : (
                <TextInput
                  value={textInputValues[index]}
                  onChangeText={(value) =>
                    handleTextInputChange(index, value)
                  }
                  style={{
                    backgroundColor: "white",
                    width: 100,
                    position: "absolute",
                    left: left + 30,
                    top: -25,
                  }}
                  onSubmitEditing={() => {
                    Keyboard.dismiss();
                    props.setShowTextInput(false);
                  }}
                />
              )}
            </View>
          </Gestures>
        );
      })}


this was the old code   {props.lastImages.slice(0, 5).map((lastImage, index) => {
        const left =
          index === 0
            ? Platform.OS === "android"
              ? 70
              : 50
            : 110 * index + 60;
        const scale = newScale;
        return (
          <Gestures
            key={index}
            scalable={{
              min: 0.4,
              max: 2,
            }}
            scale={scale}
            rotate="0deg"
            rotatable={false}
            onChange={() => {
              props.setSelectedImageIndex(index);
            }}
            onScaleEnd={(event, styles) => {
              if (styles.transform) {
                const changedScale =
                  styles.transform[0]?.scale ||
                  styles.transform[1]?.scale ||
                  1;

                setnewScale(changedScale);
              }
            }}
            onStart={() => {
              setMove(true);
            }}
            onEnd={() => {
              setMove(false);
            }}
          >
            <View>
              <Image
                source={{ uri: `data:image/jpeg;base64,${lastImage}` }}
                style={{
                  width: 150,
                  height: 320,
                  left: left,
                  top: Platform.OS === "android" ? -30 : -10,
                  position: "absolute",
                  opacity: 1,
                  opacity:
                    props.selectedImageIndex === index || !move ? 1 : 0.5,
                }}
                resizeMode="contain"
              />
              {!props.showTextInput ? (
                <Text
                  style={{
                    position: "absolute",
                    left: left + 65,
                    top: Platform.OS === "android" ? -20 : -15,
                    color: "white",
                    height:
                      textInputValues[index] &&
                      textInputValues[index].length > 0
                        ? 16
                        : 0,
                  }}
                >
                  {textInputValues[index]}
                </Text>
              ) : (
                <TextInput
                  value={textInputValues[index]}
                  onChangeText={(value) =>
                    handleTextInputChange(index, value)
                  }
                  style={{
                    backgroundColor: "white",
                    width: 100,
                    position: "absolute",
                    left: left + 30,
                    top: -25,
                  }}
                  onSubmitEditing={() => {
                    Keyboard.dismiss();
                    props.setShowTextInput(false);
                  }}
                />
              )}
            </View>
          </Gestures>
        );
      })}
useEffect(() => {
props.setLastImages((prevLastImages) => {
  const newLastImages = [...prevLastImages];
  newLastImages.forEach((_, index) => {
    newLastImages[index].scale = newScale;
  });
  return newLastImages;
});

}, [新规模]);

react-native expo gesture
© www.soinside.com 2019 - 2024. All rights reserved.