如何在 React Native 中从不同的 js 文件获取图像 URL

Question

这是我的 data.js 文件，我从中获取数据

const data2 =
[
    {
        key:1,
        about: "AC services",
        description: "description about service",

    },

   {
        key:2,
        about: "Baby sitter",
        description: "description about service"

    },

    {
        key:3,
        about: "Electronics",
        description: "description about service"

    },
.
.
.  
    ]

export default data2;

这是我使用地图函数获取数据的代码

import React from 'react';
import { Container, Header, Content, List, ListItem, Text, Left, Body, Right, Button, Thumbnail, Title } from 'native-base';
import data from '../Constant/data'
const ServiceList = (props) => {
  return (
    <Container>
      <Header>
        <Body>
          <Title> Services List </Title>
        </Body>
      </Header>
      <Content>

        <List>
        {data.map(obj =>
          <ListItem thumbnail>
            <Left>
        <Text>{obj.key}</Text>
              <Thumbnail square source={require('../Assets/serviceIcons/ac.png')} /> **want to get all image also**
            </Left>
            <Body>
              <Text>{obj.about}</Text>
            </Body>
            <Right>
              <Button transparent onPress={() => props.navigation.navigate('BookPage',{obj:obj})}>
                <Text>View</Text>
              </Button>
            </Right>
          </ListItem>
          )}
        </List>

      </Content>
    </Container>
  );
}

export default ServiceList;

结果 enter image description here

我的问题是，我想从数据文件中获取图像 URL 这样每个图标也都可以呈现，但我不知道如何在数据中编码 URL文件并将其提取到组件

Answer 1

将您的数据放入数据文件

{
  key:3,
  about: "Electronics",
  description: "description about service"
  image: <your-path-here>
},

Answer 2

为每个对象再添加一个属性 "imageUrl"

cont data = [
  ...
  {
    key:3,
    about: "Electronics",
    description: "description about service",
    imageUrl: require("../Assets/serviceIcons/ac.png")
  }
]

并像下面这样使用它

{data.map(obj => (
  ...
  <Image source={obj.imageUrl}/>
))}

如何在 React Native 中从不同的 js 文件获取图像 URL

how to get image URL from different js file in react native

javascript

reactjs

native