У меня проблема с изображением, которое просто отображается в приложении. В результатах поиска я в основном вижу решение в том, что высота и ширина требовались и отсутствовали, но я уже реализовал его без каких-либо результатов.

Я просматривал маршруты несколько раз и не вижу в этом никаких проблем.

Наконец, я подумал, что это может быть связано с изображением. Я изменил размер, и он работал с тегом <Image />. Однако мне нужно, чтобы это было фоновое изображение.

Текущий код

import React from 'react'
import { View, Text, StyleSheet, ImageBackground } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons'

export default function TitleScreen () {

  return (
    <View>
      <ImageBackground 
        source={require('../assets/images/title_background.png')}
        style={styles.backgroundImage}
        imageStyle={{resizeMode: 'cover'}}
      >
        <Text>testing</Text>
        {/* <MaterialCommunityIcons
          name={'cards-outline'}
          size={100}
        /> */}
      </ImageBackground>
    </View>
  )
}

const styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    width: '100%',
    height: '100%',
  }
});

Макет папки

  • активы
    - изображения
    --- title_background.png
  • компоненты
    - TitleScreen.js
2
Alize Nguyen 11 Сен 2018 в 00:52

1 ответ

Лучший ответ

Ответил! Ответ заключался в том, чтобы добавить flex: 1 в родительский контейнер представления - для тех, кто сталкивается с той же проблемой.

3
Alize Nguyen 10 Сен 2018 в 22:01