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

Question

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

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

Answer 1

您可以在这里查看直播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',

垂直：

flexDirection: 'column',

Answer 3

使用flexDirection: 'row'使其位于同一行&使用CCD_ 3将其垂直对齐&水平。

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