Гибкая компоновка с фиксированной шириной и доступным пространством в React Native

Question

Я пытаюсь добиться определенного макета в React Native для iOS. Я объясню макет, и я добавил изображение и ссылки для его демонстрации.

Слева

Левая область (красного цвета) должна содержать 2 элемента;заголовок и тег. Оба элемента должны отображаться в одной строке.

• Заголовок: заголовок может иметь различную длину. Он должен использовать все доступное пространство и иметь многоточие, если он слишком длинный.
• Метка: тег может иметь разную длину, он всегда должен отображаться полностью и помещаться сразу после заголовка.

Справа

Правая область (желтого цвета) имеет фиксированную ширину.

Я успешно создал макет с использованием CSS в CodePen здесь: https://codepen.io/madebyew/pen/VwwPaWZ

.row {
  display: flex;
  align-items: center;
  width: 600px;
}
.left {
  width: 80%;
  display: flex;
}
.right {
  width: 20%;
}
.title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.tag {
  white-space: nowrap;
}

Я пытался воссоздать ту же раскладку, используя React Native, но безуспешно, здесь: https://snack.expo.io/@madebyew/flex-alignment

Проблема, с которой я сталкиваюсь, заключается в том, что в React Native заголовок только усекается, чтобы уместиться в своего родителя, а не урезать, чтобы его тег-единица мог разделить его. родительское пространство.

Кто-нибудь знает, как добиться желаемого макета? Заранее спасибо.

Answer 1

    render() {
    return (
        <View style = {{width: '100%', flex: 1, alignItems: 'center', justifyContent: 'center',}}>
            <View style = {{width: '100%', height: 50, flexDirection: 'row'}}>
                <View style = {{flex: 1, flexDirection: 'row'}}>
                    <View style = {{flex: 1, paddingHorizontal: 10, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: 'blue'}}>
                        <Text numberOfLines = {1}>ssdflk dfjljsd  sdfj sdfkjs df jlskdf </Text>
                    </View>
                    <View style = {{flexDirection: 'column', alignItems: 'center', justifyContent: 'center', paddingHorizontal: 20, backgroundColor: 'red'}}>
                        <Text>Tags</Text>
                    </View>
                </View>
                <View style = {{width: 80, flexDirection: 'column', backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'center',}}>
                    <Text>Right</Text>
                </View>
            </View>
        </View>
    );
}

Я попробовал этот код, похоже, работает для вашей идеи

Answer 2

Я добавил гибкий взгляд на это:

https://snack.expo.io/Bk8GFDjKH