反应原生镜像绝对定位

Question

我正在尝试将两个图像放置在底部边框，每侧的宽度为50%，以便正确缩放到任何设备尺寸。但我似乎无法获得任何绝对的定位来以可复制的方式行事。

我做了一个例子 零食：https://snack.expo.io/rJd3OkVIM

应用程序组件和关联的样式如下所示：

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

为了满足您的要求，让我们将 2 张图像包装到带有 flexDirection: 'row' 的View，然后使用 justityContent: 'flex-end' 进行顶级View。

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

如果您需要保持图像的比例，请按照以下答案进行操作：在 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',
    }
});

Answer 2

您没有为图像提供垂直位置参考( top：x || bottom： x (，所以这可能就是您遇到这种行为的原因。

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