Question

我的代码未运行，也未显示任何错误。我在react-native中尝试了很多次，所以请帮忙弄清楚我的代码，所以我也分享了我的github代码，因此您可以拉出它并运行它（仅出现标题，不出现图像和文本）。我在这里分享我的github链接： https://github.com/Ranipandit/smart-closet-react-native

Answer 1

我检查了您的Github存储库。

您的代码存在的问题是背景图像不是处于绝对位置，文本是带有白色背景的白色（在那里但不可见）。

一个更好的解决方案是删除BackgroundImage组件，然后使用ReactNative（BackgrpoundImage）组件创建一个以图像为背景的组件：

https://facebook.github.io/react-native/docs/images#background-image-via-nesting

您的代码Home组件应类似于以下内容：

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  ImageBackground,
} from 'react-native';
import {Header} from 'react-native-elements';

export default class Home extends Component {
  render() {
    return (
        <View>
          <Header
              placement="left"
              leftComponent={{icon: 'menu', color: '#fff'}}
              centerComponent={{text: 'SMART CLOSET', style: {color: '#fff', fontWeight: "bold"}}}
              rightComponent={{icon: 'home', color: '#fff'}}
          />
          <ImageBackground 
              source={require('./images/clothes.gif')} 
              style={styles.imageBackground}
          >
            <Text style={styles.text}>
              Welcome to Smart Closet
            </Text>
          </ImageBackground>
        </View>
    )
  }
}

const styles = StyleSheet.create({
  imageBackground: {
    width: '100%',
    height: '100%',
  },
  text: {
    textAlign: 'center',
    color: 'white',
    backgroundColor: 'transparent',
    fontSize: 32
  }
});

为什么我的代码无法正常工作，并且在react-native中也没有显示任何错误

1 个答案: