Reactjs 无法在react native中设置我的背景图像？

我是一个新手，在学习本地文档的同时，我被ImageBackground的用法所困扰。下面给出了我的代码，我们将不胜感激。它工作正常，但当我开始使用navigator功能时，它并没有正常工作。请建议解决此问题的最佳解决方案

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',
  },
});

从“React”导入React；
从“react native”导入{样式表、文本、视图、按钮、图像背景}；
从“react navigation”导入{createAppContainer}；
从“反应导航堆栈”导入{createStackNavigator}；
类主屏幕扩展了React.Component{
render（）{
返回(
欢迎来到我这里
);
}
}
类DetailsScreen扩展了React.Component{
render（）{
返回(
详细信息屏幕
);
}
}
const RootStack=createStackNavigator(
{
主页：主屏幕，
详情：详情屏幕，
},
{
initialRouteName:“主页”，
}
);
const-AppContainer=createAppContainer（RootStack）；
导出默认类App扩展React.Component{
render（）{
返回；
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
背景容器：{
弹性：1，
宽度：300，
身高：100，
resizeMode:“封面”，
为内容辩护：“中心”，
对齐项目：'居中'，
},
登录名：{
填充：20，
宽度：“90%”，
身高：40，
位置：'绝对'，
左:20,，
右:0,，
排名：250，
底部：0，
},
签字人：{
填充：20，
宽度：“90%”，
身高：40，
位置：'绝对'，
左:20,，
右:0,，
前200名，
底部：0，
},
欢迎注意：{
位置：'绝对'，
左：70，
右:0,，
前200名，
底部：0，
宽度：“90%”，
身高：40，
颜色：'白色'，
},
});

一切正常，没有显示背景图像

试试这个

 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',
      },
    });

从“React”导入React；
从“react native”导入{样式表、文本、视图、按钮、图像背景}；
从“react navigation”导入{createAppContainer}；
从“反应导航堆栈”导入{createStackNavigator}；
类主屏幕扩展了React.Component{
render（）{
返回(
欢迎来到我这里
);
}
}
类DetailsScreen扩展了React.Component{
render（）{
返回(
详细信息屏幕
);
}
}
const RootStack=createStackNavigator(
{
主页：主屏幕，
详情：详情屏幕，
},
{
initialRouteName:“主页”，
}
);
const-AppContainer=createAppContainer（RootStack）；
导出默认类App扩展React.Component{
render（）{
返回；
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
背景容器：{
弹性：1，
宽度：300，
身高：100，
resizeMode:“封面”，
为内容辩护：“中心”，
对齐项目：'居中'，
},
登录名：{
填充：20，
宽度：“90%”，
身高：40，
位置：'绝对'，
左:20,，
右:0,，
排名：250，
底部：0，
},
签字人：{
填充：20，
宽度：“90%”，
身高：40，
位置：'绝对'，
左:20,，
右:0,，
前200名，
底部：0，
},
欢迎注意：{
位置：'绝对'，
左：70，
右:0,，
前200名，
底部：0，
宽度：“90%”，
身高：40，
颜色：'白色'，
},
});

您遇到了一些问题：

对齐项目：“居中，”尝试使用

import React from 'react';
import { StyleSheet, Text, View, Button, ImageBackground, Dimensions } 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,
    alignItems: 'center',
    justifyContent: 'center',
  },
  backgroundContainer: {
    width: 300,
    height: Dimensions.get('window').height

  },
  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,
  },
});

从“React”导入React；
从“react native”导入{样式表、文本、视图、按钮、图像背景、维度}；
从“react navigation”导入{createAppContainer}；
从“反应导航堆栈”导入{createStackNavigator}；
类主屏幕扩展了React.Component{
render（）{
返回(
欢迎来到我这里
);
}
}
类DetailsScreen扩展了React.Component{
render（）{
返回(
详细信息屏幕
);
}
}
const RootStack=createStackNavigator(
{
主页：主屏幕，
详情：详情屏幕，
},
{
initialRouteName:“主页”，
}
);
const-AppContainer=createAppContainer（RootStack）；
导出默认类App扩展React.Component{
render（）{
返回；
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
},
背景容器：{
宽度：300，
高度：尺寸。获取（“窗口”）。高度
},
登录名：{
填充：20，
宽度：“90%”，
身高：40，
位置：'绝对'，
左:20,，
右:0,，
排名：250，
底部：0，
},
签字人：{
填充：20，
宽度：“90%”，
身高：40，
位置：'绝对'，
左:20,，
右:0,，
前200名，
底部：0，
},
欢迎注意：{
位置：'绝对'，
左：70，
右:0,，
前200名，
底部：0，
宽度：“90%”，
身高：40，
},
});

---

在上面，当您将

backgroundContainer

的

height

设置为100时，它只需要100

我不想要图像，我想要它到背景图像您想要背景图像达到全高吗？@sachin您尝试过我的答案吗？如果我将height设置为100，那为什么它不显示图像呢？它显示了，但高度只有100像素，没有覆盖整个屏幕。但是我得到了电磁脉冲

import React from 'react';
import { StyleSheet, Text, View, Button, ImageBackground, Dimensions } 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,
    alignItems: 'center',
    justifyContent: 'center',
  },
  backgroundContainer: {
    width: 300,
    height: Dimensions.get('window').height

  },
  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,
  },
});