Блог

React Native.

моя одна функция имеет четыре изображения, например, кнопку,

 <TouchableOpacity 
      style={styles.buttonContainer1}
      onPress={ ()=>{ 
        var ImageName='img1.png';
        navigation.navigate('ImagePage',{receivedValues:ImageName});
      }}>
        <Image
          style={styles.image1}
          source={require('./src/components/Images/img1.png')} />
    </TouchableOpacity>

    <TouchableOpacity 
      style={styles.buttonContainer2}
      onPress={()=>{ 
        var ImageName='img2.png';
        navigation.navigate('ImagePage',{receivedValues:ImageName})}}>
        <Image
          style={styles.image1}
          source={require('./src/components/Images/img2.png')} />
    </TouchableOpacity>
  

Мне нужно, чтобы это щелкнутое изображение отображалось в другой функции, но проблема в том, что я получил имя изображения, но я не могу сравнить и распечатать,
как это сделать

 function ImageScreen({route,navigation}) {

const {receivedValues}=route.params;

if({receivedValues}=="img1.png")
{
  var ImageName='./src/components/Images/img1.png'; 
 }
 return (
  <View style={styles.containerImage}>
     <Text>{ImageName} </Text>
     <Image 
       style={styles.ReceivedImage}
       source={
   
       require('./src/components/Images/img1.png')}
          />

               <br/>

          <Button
           style={styles.GoBackButton}
            title="Go back"
             onPress={()=>{
            navigation.goBack();
             }}
              />
              </View>
               );
                   }
  

Попробуйте это

 <TouchableOpacity 
      style={styles.buttonContainer1}
      onPress={ ()=>{ 
        var ImageName='img1.png';
    const image = require('./src/components/Images/img1.png');
        navigation.navigate('ImagePage',{ImageName, image})}}>
      }}>
        <Image
          style={styles.image1}
          source={require('./src/components/Images/img1.png')} />
    </TouchableOpacity>

    <TouchableOpacity 
      style={styles.buttonContainer2}
      onPress={()=>{ 
        var ImageName='img2.png';
        const image = require('./src/components/Images/img2.png');
        navigation.navigate('ImagePage',{ImageName, image})}}>
        <Image
          style={styles.image1}
          source={require('./src/components/Images/img2.png')} />
    </TouchableOpacity>
  

 function ImageScreen({route,navigation}) {

const {ImageName, image}=route.params;


 return (
  <View style={styles.containerImage}>
     <Text>{ImageName} </Text>
     <Image 
       style={styles.ReceivedImage}
       source={image}
          />

 

          <Button
           style={styles.GoBackButton}
            title="Go back"
             onPress={()=>{
            navigation.goBack();
             }}
              />
              </View>
               );
                   }