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

【问题标题】：React Native: Vertically and Horizontally align image and text in same rowReact Native：垂直和水平对齐同一行中的图像和文本
【发布时间】：2021-04-10 16:36:07
【问题描述】：

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

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

【问题讨论】：

标签： react-native

【解决方案1】：

你可以在这里查看live dmeo expo-snack:

代码也很简单：

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',

【讨论】：

很高兴它对您有所帮助。如果您认为它有帮助，也请投票：)

【解决方案2】：

对于水平：

flexDirection: 'row',

对于垂直：

flexDirection: 'column',

【讨论】：

【解决方案3】：

使用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>

【讨论】：

【解决方案4】：

你可以简单地使用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>

【讨论】：