如何使用flexbox在react-native中实现此布局？

Question

我尝试使用react-native在大多数应用中实现我认为非常常见的行布局：

这是我尝试过的，但是Remainder部分的宽度永远不会超出其内部的文本：

render() {
    return (
        <View style={{ flexDirection: 'row', justifyContent: 'flex-end', paddingLeft: 16 }}>
            <View style={{ width: 50, height: 50, backgroundColor: 'red' }}>
                <Text>Logo</Text>
            </View>
            <View style={{ alignSelf: 'stretch', backgroundColor: 'green' }}>
                <Text>Name</Text>
            </View>
            <View style={{ width: 20, height: 20, backgroundColor: 'blue' }}>
                <Text>Icon</Text>
            </View>
        </View>
    );
}

结果如下：

Answer 1

您想要为剩余视图设置flex属性以进行扩展。

render() {
    return (
        <View style={{ flexDirection: 'row', justifyContent: 'flex-end', paddingLeft: 16 }}>
            <View style={{ width: 50, height: 50, backgroundColor: 'red' }}>
                <Text>Logo</Text>
            </View>
            <View style={{ flex: 1, backgroundColor: 'green' }}>
                <Text>Name</Text>
            </View>
            <View style={{ width: 20, height: 20, backgroundColor: 'blue' }}>
                <Text>Icon</Text>
            </View>
        </View>
    );
}