reactjs - 如何在本机反应中正确设置图像样式

Question

我刚刚开始学习 React Native .. 这就是我当前的应用程序的样子

到目前为止，这是我的代码：

import { StatusBar } from 'expo-status-bar';
import { SafeAreaView, StyleSheet, Text, Image, View, Button, TextInput } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.mainContainer}>
        <View style={styles.logoContainer}>
          <Image style={styles.logoImage} source={require("./assets/logo03t.png")} />
        </View>
        <Text style={styles.logoText}>App untuk Edy Kiatmadja ver 1.0</Text>
        <TextInput style={styles.input} placeholder="Username" />
        <TextInput style={styles.input} placeholder="Password" />
      </View>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'dodgerblue',
    alignItems: 'center',
    justifyContent: 'center',
  },
  logoContainer: {
    padding: 20,
  },
  logoImage: {
    resizeMode: 'contain',
    height: 200,
    backgroundColor: "#fff",
  },
  logoText: {
    marginTop: 8,
    fontSize: 12,
    fontStyle: 'italic',
  },
  mainContainer: {
    flex: 1,
    justifyContent: 'center', // horizontal axis
    alignItems: 'center', // vertical axis
  },
  input: {
    height: 40,
    margin: 10,
    borderWidth: 1,
    padding: 10,
    width: 200,
  }
});

我该怎么做才能使图像不被切断？

Answer 1

logoContainer在style中设置当前屏幕宽度的最大宽度。您可以使用 react-native 的 Dimension API 来查找当前设备的宽度和高度。

获取设备宽度：

import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;

然后将其用作容器的宽度。

...
  logoContainer: {
    padding: 20,
    maxWidth: windowWidth,
  },
...