Question

<View>
   <Text>Hello</Text>
   <Image source={require('./Vector.png')} />
</View>

我有以上观点。我想垂直和水平对齐图像和文本。图片应在右侧，文本应在同一行中。但是我无法正确对齐它们。

Answer 1

您可以在expo-snack此处查看dmeo的实时直播：

代码也非常简单：

import * as React from 'react';
import { Text, View, StyleSheet,Image } from 'react-native';





export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hey</Text>
        <Image source={{uri:'https://source.unsplash.com/random'}} style={{height:50,width:50}}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    backgroundColor: '#ecf0f1',
    padding: 8,
    flexDirection:'row',
    alignItems:'center'


  }
});

希望有帮助。毫无疑问，如果您不希望文字和图像距离太远，可以使用justifyContent: 'center',

Answer 2

使用flexDirection: 'row'将其放在同一行中，并使用justifyContent: 'center', alignItems: 'center'将其垂直和水平对齐。

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
    <Text>Hello</Text>
    <Image style={{ width: 50, height: 50 }} source={require('./Vector.png')} />
</View>

Answer 3

您只需使用flexDirection

示例：

<View
  style={{
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  }}
>
  <Text>Hello</Text>
  <Image
    style={{ width: 30, height: 30, resizeMode: "contain" }}
    source={require("./Vector.png")}
  />
</View>

如果要将图像显示在屏幕的右上角，将文本放置在左上角，请尝试此操作。可以使用position

完成

<View
  style={{
    flex: 1,
    flexDirection: "row"
  }}
>
  <Text style={{ position: "absolute", right: 0 }}>Hello</Text>
  <Image
    style={{
      width: 30,
      height: 30,
      resizeMode: "contain",
      position: "absolute",
      left: 0
    }}
    source={require("./Vector.png")}
  />
</View>

Answer 4

对于水平：

flexDirection: 'row',

对于垂直：

flexDirection: 'column',

React Native：在同一行中垂直和水平对齐图像和文本

4 个答案: