如何使用shoutem/ui和react原生创建内联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>