3

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

我做了一个示例小吃：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,
    }
});

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

4

2 回答 2

2

为了满足您的要求，让 2 图像包装到一个Viewwith flexDirection: 'row'，然后View用justityContent: 'flex-end'.

我做了一个简单的代码，硬代码高度为 200 px，并将背景放置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',
    }
});
于 2018-02-04T06:40:48.043 回答
0

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

尝试设置和样式，以便将它们设置到屏幕底部bottom: 0。imgimgr

于 2018-02-04T03:41:23.670 回答