Блог

В React native я пытаюсь добавить многоточие в длинный текст. Ограничение numberOfLines={1} не помогает, если в противном случае не используется max-width или width для текстового компонента. Но я хотел бы добиться многоточия без указания ширины, то есть текстовый компонент должен просто использовать доступную ширину и отображать многоточие для длинного текста. Можно ли этого добиться с помощью гибких стилей? Пожалуйста, помогите.

         <TouchableOpacity style={{{ height: 82, paddingTop: 12 }}>
            <View style={{flex: 1,
                        flexDirection: "row",
                        left: 16,
                        alignItems: "center",
                        justifyContent: "space-between",}}>
                <View style={{height:32, width:32}}/>
                <View style={{ flexDirection: "column" }}>
                    <View style={{ flex: 1}}>
                        <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION, really a very long description</Text>
                    </View>
                    <Text>
                        {"Final"}
                    </Text>
                </View>
            </View>
        </TouchableOpacity>
  

Пример скриншота

Вот ваш ответ:

   <TouchableOpacity style={{ height: 82, paddingTop: 12 }}>
    <View style={{
      flex: 1,
      flexDirection: "row",
      paddingLeft: 16,
      alignItems: "center",
      justifyContent: "space-between",
    }}>
      <View style={{ height: 32, width: 32 }} />
      <View style={{ flex: 1 }}>
        <View>
          <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION, really a very long description</Text>
        </View>
        <Text>
          {"Final"}
        </Text>
      </View>
    </View>
  </TouchableOpacity>
  

Из быстрого теста ваш <Text> файл фактически уже вырезан, но вы не можете его увидеть из-за этого left стиля в оболочке <View> .

Измените это на либо paddingLeft: 16 или marginLeft: 16 , и вы сможете увидеть многоточие.