Question

我有两个具有不同颜色的背景视图。两者都有自己的大小。在这些背景下，我需要在其他两个视图的左侧对齐图像。

我该怎么做？

export default class MainScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.rectangle1}>
               <Image 
        source={require('../assets/dame.png')}
        style = {styles.image}/>
        </View>
        <View style={styles.rectangle2}>
        </View>
      </View>
    )
  }
}

添加了示例图像要完成的操作：

Answer 1

除了使用absolute定位之外，这是在大多数设备上实现类似布局的另一个技巧是使用Dimensions以及用于设备宽度和高度的常量。

根据提供的信息，这是我的设计的样子：

////import { Dimensions } from react-native;

const { width: deviceWidth, height: deviceHeight } = Dimensions.get('window');

export default class MainScreen extends Component {
  render() {
    return (
      <View style={{ backgroundColor: 'magenta', height: deviceHeight }}>
        <View
          style={{
            width: deviceWidth * 0.44,
            alignSelf: 'flex-start',
          }}
        >
          <Image 
            source={{ uri: 'https://ui-avatars.com/api/?name=Alice' }}
            style={{ width: '100%', height: '100%' }}
          />
        </View>
        <View
          style={{
            backgroundColor: 'black',
            position: 'absolute',
            width: deviceWidth * 0.56,
            height: deviceWidth * 0.56,
            alignSelf: 'flex-end',
            opacity: 0.7
          }}
        />
        <View
          style={{
            backgroundColor: 'yellow',
            width: deviceWidth * 0.7,
            height: deviceWidth * 0.1,
            position: 'absolute',
            top: deviceHeight * 0.8,
            alignSelf: 'center',
            opacity: 0.8,
          }}
        />
        <View
          style={{
            backgroundColor: 'blue',
            width: deviceWidth,
            height: deviceWidth * 0.14,
            position: 'absolute',
            bottom: 0,
            alignSelf: 'flex-end',
            opacity: 0.8,
          }}
        />
      </View>
    )
  }
}

我建议您继续尝试找出哪种方法最适合您的应用程序。

在2个背景视图上对齐图像

1 个答案: