反应原生嵌套 flex答案

【问题标题】：React native nested flex反应原生嵌套 flex
【发布时间】：2018-09-21 17:41:37
【问题描述】：

我正在使用react-native-elements。我在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>

风格：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'flex-start',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  userInfo: {
    display: 'flex',
    flex: 1,
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'flex-start',
  },
});

我希望 Card 中的项目按列而不是按行定位。

这是我的结果：

我希望Username 留在Avatar 的右侧。

【问题讨论】：

标签： react-native flexbox

【解决方案1】：

只改变这种风格

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

【讨论】：

没有成功还是一样。 You may want to see my snack
如果你想让用户名出现在头像的右边，你应该把你的样式改成这个，我做到了，它成功了。