如何添加图像？ （反应本机）

Question

我尝试了几种代码，但是每次都只有错误。 如何从我的图库中添加图像（无链接），一个在另一个下方，并带有文字 位于每个图像的顶部和底部？

赞：

import React, { Component } from "react";
import { Text, View, StyleSheet, Image, ImageBackground,ScrollView } from "react-native";
import withBackground from "../components/WithBackground";

class LinksScreen extends Component {
  render() {
    return (
    
<ScrollView> 
<text>Hi</text>
 <Image source={require('./assets/images/ici.jpg')} />
 <text> Hello</text>

<text> Hi2</text>
 <Image source={require('./assets/images/ici2.jpg')} />
<text> Hello2</text>
</ScrollView> 
    
  );
  }}

export default withBackground(LinksScreen);

我是新手， 任何帮助将不胜感激。

Answer 1

您可以给出期望结果的屏幕截图吗？ 有一种叫做FlatList的东西可以用来获得图像列表。

注意：menuData是对象的数组，Item是具有图像标题和URL的对象

<FlatList
    data={this.props.menuData}
    renderItem={({ item }) => {
        return(
            <View style={{ flexDirection: 'row' }}>
                <Image source={require(item.imageURL)} />
                <Text>{item.imageText}</Text>
            </View>
        );
    }}
    keyExtractor={(item) => item.title }
/>

将此样式用于文本：

textStyle: {
    flex: 1,
    width: '100%',
    position: 'absolute',    
    alignSelf: 'center',   
    backgroundColor: 'rgba(0.57, 0.57, 0.57, 0.3)', 
    height: '100%',
}

Answer 2

我将向您展示使用native-base的可能性，但这只是一个建议。您可以在官方文档中看到一些可能性：https://docs.nativebase.io/Components.html#Components

import React, { Component } from 'react';
import { Image, ImageBackground, View } from 'react-native';
import { Card, CardItem, Text, Left, Right } from 'native-base';
import styles from './styles';

class ProductImage extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <ImageBackground
          style={ styles.image }
          source={{ uri: this.props.photo }} 
        >
        </ImageBackground>
      </View>
    );
  }
}

export default ProductImage

因此，如果您要放置不带props的照片，则只需放置链接图像，例如'https://www.w3schools.com/w3css/img_lights.jpg'。不要忘记安装依赖项：npm install native-base --save

Answer 3

您能尝试一次吗？

<ScrollView> 
  <View>
    <Text>Hi</Text>
    <Image source={require('./assets/snack-icon.png')} style={{ width: '100%', 
      height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />
  </View>
  <View>
    <Text> Hi2</Text>
    <Image source={require('./assets/snack-icon.png')} style={{ width: '100%', 
      height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />
    <Text> Hello2</Text>
   </View>
</ScrollView>