Как добавить изображения? (React Native)
Я пробовал несколько кодов, но каждый раз возникали только ошибки. Как добавить изображения из моей галереи (без ссылок) одно под другим, с текстом вверху и внизу каждого изображения?
Нравится:
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);Я новичок, любая помощь будет оценена.
У меня нет ошибки кода, но экран моего андроида красный. (код ошибки: 500), за которым следует длинный текст.
Возможный дубликат Куда помещать изображения в проекте, поддерживающем реакцию?
@Lylys А можно вместо этого выложить снимок экрана с ошибкой?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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
У меня уже есть фоновое изображение => «экспорт по умолчанию с фоном (LinksScreen);» Я только хочу разместить изображение, немного похожее на карту, с текстом внизу и вверху.
Можете дать скриншот ожидаемого результата?
Существует нечто, называемое 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%',
}
Рад помочь и добро пожаловать в Stack Overflow. Если этот или любой другой ответ решил вашу проблему, отметьте его как принятый.
@Lylys, я видел снимок экрана с ошибкой. Это связано с кодом export default, который вы написали. По умолчанию в модуле можно экспортировать только один компонент. Так что любезно измените свой код на export withBackGround(LinksScreen); вместо export default withBackGround(LinksScreen);
да, я понимаю, но делаю это «экспорт с помощью BackGround (LinksScreen);» слово «экспорт» подчеркнуто красным. Есть идея сохранить свой фон и добавить изображения? (Этот фоновый код позволяет мне использовать один код для фона всех моих страниц)
Вы импортируете withBackground в компонент LinksScreen. Вы снова пытаетесь подключить его к export в том же компоненте. Так что буквально вы экспортируете его дважды. И в LinksScreen, и в WithBackground.js. Вам не разрешено это делать, это ошибка. Итак, чего вы пытаетесь достичь? сохранить одно и то же изображение для всех или сохранить макет и загрузить изображения>
Какое решение для меня самое лучшее? Мне нужен единый код, который позволяет мне загружать один и тот же фон на все мои вкладки, но мне также нужно добавлять элементы на мои страницы (например, изображения, кнопки ... как то, что я пытаюсь сделать сейчас). не совместим с другим методом?
Можете ли вы попробовать это один раз:
<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>
Как вы объяснили выше, текст между изображениями. Я не добавил вверху изображения. Вам нужно добавить текст вверху изображения?
да, но это не работает, экран моего устройства Android все еще красный.
Я проверял здесь, вы можете проверить это: snake.expo.io/@supi/YW54aW Если вы все еще получаете какую-либо ошибку, просто дайте мне знать. Проверим с моей стороны
вот результат: image.noelshack.com/fichiers/2018/47/4/…
Просто используйте `` экспортировать экран ссылок по умолчанию; вместо экспорта по умолчанию withBackground (LinksScreen);
нет, мне нужно сделать это, чтобы везде был одинаковый фон без необходимости копировать и вставлять код для фона на всех моих вкладках
Можете ли вы показать ошибки, которые вы получаете?