如何使用 shoutem/ui 创建一个内联 facepile 并响应本机

Question

如何在 shoutem/ui 中创建内联图像行？现在它们显示为块元素，每个元素都有自己的行。相反，我想将它们显示为一排居中的头像图像。

http://shoutem.github.io/docs/ui-toolkit/components/image

<Tile>
  <Parallax driver={this.driver} scrollSpeed={1.2}>

    <Title styleName="md-gutter-top">{post.name}</Title>
    <Caption>{post.title}</Caption>
    <View>
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
    </View>

  </Parallax>
</Tile>

Answer 1

所以我只需要查看 shoutem 包含在其视图中的默认样式。 https://shoutem.github.io/docs/ui-toolkit/components/view

在这种情况下

<View styleName="horizontal">

这么喜欢

 <View styleName="horizontal">
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
    </View>

如何使用 shoutem/ui 创建一个内联 facepile 并响应本机

how to create an inline facepile with shoutem/ui and react native

react-native

shoutem