Question

我有一个父View容器，其中有两个孩子Views和flexDirection: row

由于一个子视图View的内容，它的高度大于另一个视图child的高度。

我想做什么？

我想在其中一个高度较短的子视图中放置垂直居中的文本。在下面的示例中，文字“ BUDGET”应位于图片旁边的中心。

这是我问题的零食链接。

https://snack.expo.io/ByWT6Cb5V

但是问题是，如果我做alignSelf: center，做出本机反应是考虑较大子视图的高度，并根据上下文将文本居中

PS marginTop为我完成了工作，但我觉得这是可以解决的。

我真正的问题是，为什么内容较少的View与其同级View占据的高度相同？

Answer 1

实际上我不明白您想问的问题（（在下面的示例中，“ BUDGET”文本应位于旁边图像的中心。））如果您想在图片，例如，您说要在图片的中央部分显示“ BUDGET”，则应使用图片背景：

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

// You can import from local files
//import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
// import { Card } from 'react-native-paper';

export default class App extends React.Component {
  render() {
    return (
      <View style={{flex:1, marginTop:100}}>
            <View style={styles.budgetBlock}>
                            <View style={styles.budgetTextBlock}>
                                <ImageBackground source={require('./assets/snack-icon.png')} style={{width:50, height:50,justifyContent:'center',alignItems:'center'}} >
                                <Text style={styles.budgetText}> BUDGET </Text>
</ImageBackground>
                            </View>
                            <View style={styles.budgetValueBlock}>
                                    <Text style={styles.budgetType}> Too High </Text>
                                    <Text style={styles.budgetType}> Too High</Text>
                                    <Text style={styles.budgetType}> Too High</Text>
                                    <Text style={styles.budgetType}> Too High</Text>
                            </View>
                        </View>
        </View>
    );
  }
}

，但是如果您不是故意的，并且“居中”的目的是垂直对齐。您应该这样做：

 budgetTextBlock: {
    flexDirection: 'row',
    alignItems: 'center',<<<<<<this shows BUDGET in center
    height: 'auto',

}

React Native-将View的高度设置为与内容相同

1 个答案: