當它應該在下一行繼續時，文本在標題上被裁剪

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>

瞧