React native 反应本机嵌套flex

我正在使用

react原生元素

。我在

react native

的布局系统中遇到困难

 <View style={styles.container}>
    {canAccessCamera ? (
        <Card style={styles.userInfo}>
            <Avatar medium source={Logo} rounded />
            <Text>Username</Text>
        </Card>
    ) : (
      <Text>Give me access to camera</Text>
    )}
  </View>

我想要

卡中的项目

按列而不是按行定位

这是我的结果：

---

我希望

用户名

保持在

头像的右侧

仅更改此样式

  userInfo: {
      display: "flex",
      alignItems: "center",
      flexDirection: "row",
      justifyContent: "flex-start"                      
 },
  container:{
    flex: 1,
    alignItems: "stretch",
    justifyContent: "flex-start",
    paddingTop: 5,
    backgroundColor: "#ecf0f1",
    alignItems: "center"

---

没有成功，它仍然是一样的。如果你想把用户名放在头像的右边，你应该把你的风格改成这个，我做了，它成功了。

  userInfo: {
      display: "flex",
      alignItems: "center",
      flexDirection: "row",
      justifyContent: "flex-start"                      
 },
  container:{
    flex: 1,
    alignItems: "stretch",
    justifyContent: "flex-start",
    paddingTop: 5,
    backgroundColor: "#ecf0f1",
    alignItems: "center"