时间戳

首页 > 解决方案 > 无法在本机反应中设置我的背景图像？

reactjs - 无法在本机反应中设置我的背景图像？

问题描述

我是新来的本地人，在学习本地文档时，我被 ImageBackground 的使用困住了。我的代码在下面给出，帮助将不胜感激。它工作正常，但是当我开始使用导航器功能时，它无法正常工作。请提出解决此问题的最佳解决方案。

import React from 'react';
import { StyleSheet, Text, View, Button, ImageBackground } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <ImageBackground
          source={{
            uri:
              'https://images.unsplash.com/photo-1524338198850-8a2ff63aaceb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=358&q=80',
          }}
          style={styles.backgroundContainer}/>
          <Text style={styles.welcomenote}>WELCOME TO ME</Text>
          <View style={styles.loginbtn}>
            <Button style={styles.loginbtn} title="LOGIN" />
          </View>
          <View style={styles.signupbtn}>
            <Button title="SIGNUP" />
          </View>

      </View>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  backgroundContainer: {
    flex: 1,
    width: 300,
    height: 100,
    resizeMode: 'cover',
    justifyContent: 'center',
    alignItems: 'center,',
  },
  loginbtn: {
    padding: 20,
    width: '90%',
    height: 40,
    position: 'absolute',
    left: 20,
    right: 0,
    top: 250,
    bottom: 0,
  },
  signupbtn: {
    padding: 20,
    width: '90%',
    height: 40,
    position: 'absolute',
    left: 20,
    right: 0,
    top: 200,
    bottom: 0,
  },
  welcomenote: {
    position: 'absolute',
    left: 70,
    right: 0,
    top: 200,
    bottom: 0,
    width: '90%',
    height: 40,
    color: 'white',
  },
});

一切都很好，它没有显示背景图像

标签： reactjsreact-nativeimagebackground

解决方案

尝试这个，

 import React from 'react';
    import { StyleSheet, Text, View, Button, ImageBackground } from 'react-native';
    import { createAppContainer } from 'react-navigation';
    import { createStackNavigator } from 'react-navigation-stack';

    class HomeScreen extends React.Component {
      render() {
        return (
          <View style={styles.container}>
         <Image source={require('https://images.unsplash.com/photo-1524338198850-8a2ff63aaceb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=358&q=80')}  style= 
         {styles.backgroundContainer}/>
              <Text style={styles.welcomenote}>WELCOME TO ME</Text>
              <View style={styles.loginbtn}>
                <Button style={styles.loginbtn} title="LOGIN" />
              </View>
              <View style={styles.signupbtn}>
                <Button title="SIGNUP" />
              </View>

          </View>
        );
      }
    }
    class DetailsScreen extends React.Component {
      render() {
        return (
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Details Screen</Text>
          </View>
        );
      }
    }

    const RootStack = createStackNavigator(
      {
        Home: HomeScreen,
        Details: DetailsScreen,
      },
      {
        initialRouteName: 'Home',
      }
    );

    const AppContainer = createAppContainer(RootStack);

    export default class App extends React.Component {
      render() {
        return <AppContainer />;
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
      backgroundContainer: {
        flex: 1,
        width: 300,
        height: 100,
        resizeMode: 'cover',
        justifyContent: 'center',
        alignItems: 'center,',
      },
      loginbtn: {
        padding: 20,
        width: '90%',
        height: 40,
        position: 'absolute',
        left: 20,
        right: 0,
        top: 250,
        bottom: 0,
      },
      signupbtn: {
        padding: 20,
        width: '90%',
        height: 40,
        position: 'absolute',
        left: 20,
        right: 0,
        top: 200,
        bottom: 0,
      },
      welcomenote: {
        position: 'absolute',
        left: 70,
        right: 0,
        top: 200,
        bottom: 0,
        width: '90%',
        height: 40,
        color: 'white',
      },
    });

推荐阅读