如果文本大小在 react native 中增加，如何增加视图大小(自动)

Question

我正在 react native 中做一个UI设计 我已经制作了一张类别卡 如果类别名称很长，我想增加视图的宽度。 但我不明白该怎么做。请帮忙，这是我的代码。

 <View style={styles.CardMainView}>
   <View style={styles.ThirdLayerStyle} />
   <View style={styles.SecondLayerStyle} />
     <View style={styles.FirstLayerStyle}>
       <Image resizeMode={'contain'} style={styles.CatImageStyle}
         source={require('../../Assets/Images/doccatImage.png')}
       />
     </View>
     <Text numberOfLines={1} style={{color:'#fff' ,  fontSize:15, top:28  , marginLeft:25  , marginRight:20, fontFamily: "poppinsregular"}}>Orthopaedic</Text>
   </View>
 </View>
  CardMainView:{
    flexDirection:'row',
    borderRadius:4,
    backgroundColor:"#1abc9c",
    width:190,
    height:80,
    elevation:3,
    shadowColor:'#000',
    overflow:'hidden',
  },

Answer 1

如果未设置组件的宽度，则在内容大小更改时可以调整该组件的大小。 此外，我编写了一个组件，如果文本大小增加，该组件会扩展高度。 将height: 0设置为状态 并将此函数添加到类中以专注于文本输入

focus () {
    this.textInput && this.textInput.focus()
  }

并添加此组件以返回

<TextInput
        {...this.props}
        ref={(view) => (this.textInput = view)}
        multiline
        onContentSizeChange={(event) => {
          if (event && event.nativeEvent && event.nativeEvent.contentSize) {
            this.setState({
              height: event.nativeEvent.contentSize.height
            })
          }
          this.props.onContentSizeChange && this.props.onContentSizeChange(event)
        }}
        style={[this.props.style, { height: Math.max(35, this.state.height) }]}
      />

希望这可以帮助您或;)

Answer 2

我认为您可以通过提供最里面的填充组件来控制大小，当您提供填充时，您的组件将随着文本大小的增加而增加。