我想知道如何使所有图像的比例更改为用户更改的图像的比例?使用 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;
});
}, [新规模]);