react-native - 反应原生嵌套 flex

Question

我正在使用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-nativeflexbox

Answer 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"