React Native 中具有固定宽度和可用空间的灵活布局答案

【问题标题】：Flexible layout with fixed-width and available space in React NativeReact Native 中具有固定宽度和可用空间的灵活布局
【发布时间】：2020-02-17 19:21:24
【问题描述】：

我正在尝试在 React Native for iOS 中实现特定的布局。我将解释布局，并添加了图像和链接来演示它。

左

左侧区域（红色）应包含 2 个项目；标题和标签。这两个项目应该出现在同一行。

标题：标题的长度可能不同。它应该使用所有可用空间，如果太长，则使用省略号。
标签：标签的长度可能不同，应始终完整显示，并紧跟在标题之后。

正确

右侧区域（黄色）具有固定宽度。

我在 CodePen 使用 CSS 成功创建了布局：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 中，Title 只会截断以适合其父级，而不是截断以允许其 Tag single 共享其父级的空间。

有谁知道如何实现所需的布局？提前致谢。

【问题讨论】：

标签： ios react-native layout flexbox

【解决方案1】：

我已经添加了一些弹性看看这个：

https://snack.expo.io/Bk8GFDjKH

【讨论】：

不幸的是，您的更改将标记对齐到左侧（红色）区域的右侧。我需要在标题结束后立即显示标签，如第一个屏幕截图所示。
您应该阅读有关 flexGrow、flexShrink 和 flexBasis 的文档。我认为解决方案就在那里
我已经阅读了文档，但我很欣赏这个建议。不幸的是，我还没有找到解决方案。谢谢。

【解决方案2】：

    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>
    );
}

我试过这段代码，看起来适合你的想法

【讨论】：

不幸的是，这会将标签定位在左侧区域的右侧。我在snack.expo.io/@madebyew/flex-alignment-v2-so 创建了您的建议的演示。查看第二行有一个短标题，标签应该直接出现在该文本之后（因此标题需要缩小以适合其文本）。感谢您的建议。