当它应该在下一行继续时，文本在标题上被裁剪

Question

<View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          height: 130,
          marginVertical: 10,
          overflow: 'hidden'
        }}
      >
        <Image
          source={{
            uri: props.image_medium
          }}
          style={{
            height: 120,
            width: 120,
            borderRadius: 10
          }}
        />
        <View style={{ marginLeft: 10 }}>
          <Text
            style={{
              fontFamily: 'Montserrat_bold',
              fontSize: 14,
              color: Colors.NewBlue
            }}
          >
            {props?.title.trim()}
          </Text>

我正在尝试使标题不裁剪并继续下一行，但结果如您在照片中看到的那样

Answer 1

所以我只是将 flex:1 添加到包含视图中

<View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          height: 130,
          marginVertical: 10,
          overflow: 'hidden'
        }}
      >
        <Image
          source={{
            uri: props.image_medium
          }}
          style={{
            height: 120,
            width: 120,
            borderRadius: 10
          }}
        />
        <View style={{ marginLeft: 10, flex:1}}> // right here
          <Text
            style={{ 
              fontFamily: 'Montserrat_bold',
              fontSize: 14,
              color: Colors.NewBlue
            }}
          >
            {props?.title.trim()}
          </Text>

瞧