react-native - react-native uwp - 将列中的文本元素与标签的右侧对齐

Question

对于 windows UWP 的 react-native，我有以下 JSX：

<View style={{ flexDirection: "row" }}>
    <View style={{ flex: 1, flexDirection: 'column', margin: 5, alignItems: 'stretch' }}>
        <View style={{ flexDirection: 'row' }}>
            <Text selectable={true} style={{ textAlign: 'right', flex: 1 }}>Average:</Text>
            <Text selectable={true} style={{ flex: 2 }} >&nbsp;&nbsp;{this.props.averageValue}&nbsp;C</Text>
        </View>
        <View style={{ flexDirection: 'row' }}>
            <Text selectable={true} style={{ textAlign: 'right', flex: 1 }}>Last:</Text>
            <Text selectable={true} style={{ flex: 2 }}>&nbsp;&nbsp;{this.props.lastValue}&nbsp;C</Text>
        </View>
    </View>
</View>

其中列出了 Average 和 Last 文本，因此它们与冒号对齐，如下所示：

视觉上这就是我想要的，但我不能一次选择整行的文本。只有每个单独的文本元素是可选择的。如果我用这样的外部文本块包装两个文本块：

<View style={{ flexDirection: 'row' }}>
    <Text selectable={true}>
        <Text style={{ textAlign: 'right', flex: 1 }}>Average:</Text>
        <Text style={{ flex: 2 }} >&nbsp;&nbsp;{this.props.averageValue}&nbsp;C</Text>
    </Text>
</View>
<View style={{ flexDirection: 'row' }}>
    <Text selectable={true}>
        <Text style={{ textAlign: 'right', flex: 1 }}>Last:</Text>
        <Text style={{ flex: 2 }}>&nbsp;&nbsp;{this.props.lastValue}&nbsp;C</Text>
    </Text>
</View>

然后我的文本可以像我想要的那样选择，但布局更改为：

我怎样才能得到我想要的布局和所有的文本都是可选的？我必须使用显式宽度还是可以使用 flexbox 来完成？

Answer 1

这似乎是不可能的。使它们全部可选的唯一方法是将它们包装在外部 Text 元素中。但是文本框不参与 Flexbox 布局，因此无法实现我想要的对齐方式。