视图不会环绕文本

Question

我正在尝试使用 React Native 构建一个应用程序，我想创建一个 Chip 组件，但是我无法在 parent view 周围制作 child view 因此每个芯片大小会有所不同（根据文字）。

我尝试搜索，看到的答案很少，但由于某种原因没有任何效果。 这就是我所拥有的：

return (
    <View style={styles.chip}>
        <Text style={styles.chipTitle}>{Categories.SelfImprovment}</Text>
    </View>
)

这是样式：

const styles = StyleSheet.create({
    chip: {
        height: 32,
        margin: 8,
        padding: 8,
        borderRadius: 16,
        backgroundColor: Colors.black,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        flexWrap: 'wrap',
    },
    chipTitle: {
        color: '#fff',
        flex: 1,
    }
});

这是我得到的：

我在这里做错了什么？根据我看到的帖子，这看起来是让父视图环绕子视图的正确方法。