Как добавить изображения?(Реагируй Родной)

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

Можете ли вы попробовать это один раз:

<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>

Answer 3

Я собираюсь показать вам возможность работы с 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