【问题标题】:React Native cant display Image from objectReact Native 无法显示来自对象的图像
【发布时间】:2021-10-24 14:49:34
【问题描述】:

source={require("../assets/image1.png")} - 工作!!! -------------------------------------------------- -------------------------------------------------- ------------------------------------------
但是 -> source={require(image.img)} --- 不起作用 (image.img = "../assets/image1.png")

 export default function Home({ navigation}) {
        var images = [
            {
                key: 0,
                img: "../assets/image1.png",
                user: "milos_markovic",
            }
        ]
      return (<View style={styles.slike}>
                {images.map(image => {
                    return(<View >
                        <Image
                            source={require(image.img)}


  //this doesn't work (source={require(image.img)})   , image.img = "../assets/image1.png"
  //but this -> source={require("../assets/image1.png")} work, why i cant get image from object 
     
           />
                </View>)
            })}
          </View>
  )}

【问题讨论】:

    标签: javascript html xml react-native


    【解决方案1】:

    尝试在对象中使用require:

    import * as React from 'react';
    import { Text, View, StyleSheet,Image } from 'react-native';
    import Constants from 'expo-constants';
    
    // You can import from local files
    import AssetExample from './components/AssetExample';
    
    // or any pure javascript modules available in npm
    import { Card } from 'react-native-paper';
    
    export default function App() {
      const images = [
        {
          key: 0,
          img: require('@expo/snack-static/react-native-logo.png'),
          user: "milos_markovic",
        }
      ]
      return (
        <View style={styles.container}>
          <Image
            style={styles.tinyLogo}
            source={images[0].img}
          />
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#ecf0f1',
        padding: 8,
      },
      paragraph: {
        margin: 24,
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'center',
      },
    });
    

    现场示例https://snack.expo.dev/2qkBNGQRg

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-07-14
      • 2016-11-02
      • 2019-04-11
      • 1970-01-01
      • 2015-12-17
      • 1970-01-01
      相关资源
      最近更新 更多