为什么我的图像(和子组件)没有在React Native上与ImageBackground一起显示?

时间:2018-09-10 21:52:06

标签: react-native background-image react-native-ios

我在应用程序上显示的图像有问题。通过搜索结果,我主要看到的解决方案是高度和宽度是必需的并且缺少,但是我已经实现了,但是没有结果。

我已经多次查看了路线,但没有看到任何问题。

最后,我认为这可能与图片有关。我更改了大小,并使用了<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

1 个答案:

答案 0 :(得分:1)

回答了!答案是在父视图容器中添加flex:1-用于遇到相同问题的人。