代码之家 › 专栏 › 技术社区 › blue

反应本机-图像不会填充屏幕?

react-native reactjs css

blue · 技术社区 · 5 年前

这令人沮丧。我有一个与屏幕(这个设备)尺寸完全相同的图像,而且与splash图像尺寸相同。我只想它填满整个屏幕,上面的其他视图,几秒钟后,飞溅消失,以便做一个自定义动画。

看看其他的问题,我已经试过了(在其他应用程序元素的主容器之外):

<Animated.View style = {styles.splash}>
          <Image style = {{resizeMode: 'cover'}} source={require('./assets/splash2-txt.png')}/>
        </Animated.View>

splash: {
        flex: 1,
        position: 'absolute',
        zIndex: 4
      },

然而,图像被放大了,一直延伸到角落。

0 回复 | 直到 5 年前

Bruno Cardoso 5 年前

使用 StyleSheet.absoluteFillObject flex .

import * as React from 'react';
import { Image, View, StyleSheet, StatusBar } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
    <StatusBar barStyle="light-content" />
      <Image style={styles.image} source={{uri: 'https://reactjs.org/logo-og.png'}} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  image: {
    ...StyleSheet.absoluteFillObject,
    resizeMode: 'cover',
  },
});

jamal 5 年前

请使用react native ImageBackground

import React from "react";
    import { ImageBackground, StyleSheet, Text, View } from "react-native";
    
    const image = { uri: "https://reactjs.org/logo-og.png" };
    
    const App = () => (
      <View style={styles.container}>
        <ImageBackground source={image} style={styles.image}>
          <Text style={styles.text}>Inside</Text>
        </ImageBackground>
      </View>
    );
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        flexDirection: "column"
      },
      image: {
        flex: 1,
        resizeMode: "cover",
        justifyContent: "center"
      },
      text: {
        color: "grey",
        fontSize: 30,
        fontWeight: "bold"
      }
    });
    
    export default App;

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前