Question

我想编写一个自定义父View，其中包含一个Text组件子视图或两个Text组件子视图。有没有办法根据View视图的高度设置父Text的高度？

class ParentView extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {
      titleText,
      bodyText,
    } = this.props;

    //if titleText is passed to props, measure it's height; 
    //if bodyText is passed to props, measure it's height;
    // set contentContainer height = titleText + bodyText + someMargin
    return (
      <View style={styles.contentContainer}>        
        {titleText && <Text style={styles.title}>
          {titleText}
        </Text>}
        {bodyText && <Text style={styles.body}>
          {bodyText}
        </Text>}
      </View>
    );
  }
}

Answer 1

您可以在flex:0容器

上设置View

const styles = StyleSheet.create({
  contentContainer: {
    flex: 0
  }
});

用这种方式它将根据孩子的身高进行扩展。

有关flex属性的一些信息：

当flex是正数时，它会使组件变得灵活   其大小将与其弹性值成比例。所以带有flex的组件   如果将flex设置为1，则设置为2将占用两倍的空间作为组件。

当flex为0时，组件的大小根据宽度和高度而定   这是不灵活的。

当flex为-1时，组件的大小通常根据宽度而定   高度。但是，如果没有足够的空间，组件将会   缩小到minWidth和minHeight。

Answer 2

您可以创建一个单独的辅助函数，分别返回标题文本和正文文本，或者返回高度为零的视图，如果您还没有要显示和替换使用该功能的整个视图。所以你可以像这样替换你的代码片段：

class ParentView extends Component {
  constructor(props) {
    super(props);
    this.state = {
    isTitle : props.titleText,
    isBody: props.bodyText
   }
}

  render() {

   //if titleText is passed to props, measure it's height; 
   //if bodyText is passed to props, measure it's height;
   // set contentContainer height = titleText + bodyText + someMargin
   return (
      {/* include this helper function to return Title Text */}        
    {this.returnText()}

    );
  }
}
   returnText() {
        if(this.state.isTitle && this.state.isBody) {
            return(
                <View style={styles.contentContainer}>        
                    <Text style={styles.title}>
                        {titleText}
                    </Text>
                    <Text style={styles.body}>
                        {bodyText}
                    </Text>
                </View>
            )
        }
        else if(this.state.isTitle && !this.state.isBody) {
            return(
                <View style={styles.contentContainer}>        
                    <Text style={styles.title}>
                      {titleText}
                    </Text>
                    <View style = {{height: 0}}/>
                </View>
                )
        }
        else if(!this.state.isTitle && this.state.isBody) {
            return(
                <View style={styles.contentContainer}>
                    <View style = {{height: 0}}/>
                    <Text style={styles.body}>
                        {bodyText}
                    </Text>
                </View>
                )
        }
        else {
            return(
                <View style={styles.contentContainer}>   
                    <View style = {{height: 0}}/>
                </View>
                )
            }
        }

如何根据子视图的高度设置父视图的高度

2 个答案: