如何在React Native中使用Expo Image Picker将Image uri从一个屏幕传递到另一个屏幕

Question

我想将图像uri传递到下一个屏幕，这样我就可以在一个屏幕上选择图像并在另一个屏幕中显示，有什么可能的方法吗？我正在从Info.js中选择图像，并希望在

Profile.jsInfo.js

export default function Info({ route, navigation }) {
const [modalVisible, setModalVisible] = useState(false);
const [profilePicture, setprofilePicture] = useState('');
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
if (!result.cancelled) {
setprofilePicture(result.uri);
setModalVisible(false);
}
}
const openCamera = async () => {
const permissionResult = await ImagePicker.requestCameraPermissionsAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
if (permissionResult.granted === false) {
alert("You've refused to allow this appp to access your camera!");
return;
}
const result = await ImagePicker.launchCameraAsync();
// console.log(result);
if (!result.cancelled) {
setprofilePicture(result.uri);
setModalVisible(false);
}
}

if (profilePicture != '') {
nextbtn = <NextBtn txt={"Next"} onPress={() => { navigation.navigate('Profile', { profile: profilePicture }) }} />
} else {
nextbtn = <Text></Text>
}
var bg = ''
if (profilePicture != '') {
bg = { backgroundColor: 'transparent' }
}
return (
<View style={{ flex: 1 }}>
<View style={[s.surface, s.fullView, {paddingTop: 64}]}>
{nextbtn}
<Text style={[s.heading2, s.onSurface, s.container]}>Your Info</Text>
<Text style={[s.txt, s.onSurface, s.containerLg, s.mt1, s.lhNormal, s.textCenter]}>Enter your name and add a profile picture.</Text>
<ImageBackground
source={{ uri: profilePicture }}
resizeMode="cover"
style={{ marginTop: 18 }}
imageStyle={{ borderRadius: 100 }}
>
<TouchableOpacity
style={[s.profileSelector, bg]}
onPress={() => { setModalVisible(true) }}
>
<FontAwesomeIcon icon={faCamera} size={20} color={color.onSurfaceColor} />
</TouchableOpacity>
</ImageBackground>
</View>
<Modal
animationType="fade"
transparent={true}
visible={modalVisible}
statusBarTranslucent={true}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}
>
<View style={[s.centeredView, s.bgOverlay]}>
<View style={s.modalView}>
<Text style={s.modalText}>Choose Info Picture</Text>
<View style={[s.dFlex, {flexDirection: 'row'}]}>
<TouchableOpacity
style={[s.profieSelection]}
onPress={openCamera}
>
<FontAwesomeIcon icon={faCamera} size={20} color={color.onSecondaryColor} />
</TouchableOpacity>
<TouchableOpacity
style={[s.profieSelection]}
onPress={pickImage}
>
<FontAwesomeIcon icon={faImages} size={20} color={color.onSecondaryColor} />
</TouchableOpacity>
</View>
<Pressable
style={[s.btn, { minWidth: 260 }]}
onPress={() => setModalVisible(!modalVisible)}
>
<Text style={[s.btnText]}>Cancel</Text>
</Pressable>
</View>
</View>
</Modal>
</View >
)
}

Profile.js

export default function Profile({ route, navigation }) {
const { profile } = route.params;
var profilePicture = JSON.stringify(profile);
console.log(profilePicture)
eturn (
<View style={{ flex: 1 }}>
<View style={[s.surface, s.fullView, { paddingTop: 64 }]}>
<Text style={[s.heading2, s.onSurface, s.container]}>Your Profile</Text>
<Text style={[s.txt, s.onSurface, s.containerLg, s.mt1, s.mb2, s.lhNormal, s.textCenter]}>Enter your name and add a profile picture.</Text>
<Image source={profilePicture} style={{ width: 136, borderRadius: 100, height: 136, backgroundColor: '#fff' }} />
</View>
</View >
)
}

Answer 1

您似乎在使用React Navigation，以下是关于如何使用React Navigation 将参数传递到路线的官方指南

Answer 2

您可以从一个屏幕获取图像的uri，并通过导航参数将其传递到另一个屏幕。查看@react-navigation/native

const navigation = useNavigation();
const onPickImage = () => {
// expo image picker codes here 
navigation.navigate('SecondScreen', { uri });
}

Answer 3

我发现了，我实际上使用的是Json.Stringify，它包含"quot；(引号(，在字符串中，导致问题，您可以删除"；，或者你可以跳过字符串。即

export default function Profile({ route, navigation }) {
const { profile } = route.params;
eturn (
<View style={{ flex: 1 }}>
<View style={[s.surface, s.fullView, { paddingTop: 64 }]}>
<Text style={[s.heading2, s.onSurface, s.container]}>Your Profile</Text>
<Text style={[s.txt, s.onSurface, s.containerLg, s.mt1, s.mb2, s.lhNormal, s.textCenter]}>Enter your name and add a profile picture.</Text>
<Image source={profile} style={{ width: 136, borderRadius: 100, height: 136, backgroundColor: '#fff' }} />
</View>
</View >
)
}