Question

我正在尝试定位到底部边框处的图像，每边都有50％的宽度，以便适当缩放到任何设备尺寸。但我似乎无法以可重复的方式获得任何绝对定位。

我已经举了一个例子Snack：https://snack.expo.io/rJd3OkVIM

App组件和相关的样式如下所示：

import React, { Component } from 'react';
import { View, StyleSheet, Image } from 'react-native';


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
                style={styles.img}
                resizeMode="contain"
                resizeMethod="resize"
                source={require('./leftbg.png')}
            />
        <Image
                style={styles.imgr}
                resizeMode="contain"
                resizeMethod="resize"
                source={require('./rightbg.png')}
            />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
  },
    img: {
      width: '50%',
      position: 'absolute',
      left: 0,
    },
    imgr: {
      width: '50%',
      position: 'absolute',
      right: 0,
    }
});

每个设备将图像垂直居中设置为屏幕的随机部分，每次打开项目时，居中似乎都会发生变化。

Answer 1

你没有给你的图像一个垂直位置参考（顶部：x || bottom：x），所以这可能是你遇到这种行为的原因。

尝试在bottom: 0和img样式上设置imgr，以便将它们设置在屏幕底部。

Answer 2

要达到您的要求，请使用View将2张图片打包到flexDirection: 'row'，然后使用View制作顶级justityContent: 'flex-end'。

我制作了一个硬代码高度为200像素的简单代码，并将背景设置为goldenrod以便于识别。

如果您需要保持图片的比例，请按照以下回答：Maintain aspect ratio of image with full width in React Native

import React, { Component } from 'react';
import { View, StyleSheet, Image } from 'react-native';


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{ flexDirection: 'row', height: 200, backgroundColor: 'goldenrod' }}>
          <Image
                style={styles.img}
                source={require('./leftbg.png')}
            />
          <Image
                  style={styles.imgr}
                  source={require('./rightbg.png')}
              />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
    justifyContent: 'flex-end',
  },
    img: {
      width: '50%',
      height: '100%',
      resizeMode: 'cover',
    },
    imgr: {
      width: '50%',
      height: '100%',
      resizeMode: 'cover',
    }
});

React Native Image绝对定位

2 个答案: