Question

我尝试使用Shoutem UI工具包中的NavigationBar。

我的代码：

<Screen>
    <NavigationBar centerComponent={<Title>TITLE</Title>}/>

    <ListView
        data={groupedData}
        renderRow={this.renderRow}
        loading ={this.state.loading}
        onRefresh={this.getAllNewsfeed.bind(this)}
        onLoadMore ={this.loadMoreData.bind(this)}
        loadMoreSpinner={<Spinner/>} />

    <Button onPress={this.onLogout.bind(this)}>
        <Text>
            LOGOUT
        </Text>
    </Button>
</Screen>

但是NavigationBar总是隐藏在NavigationBar上面的listview。但是当我尝试将其替换为Title时。它仍然有效。但我不想使用标题因为我想要添加按钮或其他相同的东西。

Answer 1

这个PR解决了它https://github.com/shoutem/ui/pull/104/files，但不知怎的，我们已经从主题中删除了它。我们将在下一个版本中修复它，但在此之前你可以通过这个来帮助自己：

<Screen>
  <NavigationBar
    style={{
      container: {
        position: 'relative',
        width: Dimensions.get('window').width,
      }
    }}
    centerComponent={<Title>TITLE</Title>}
  />
  <ListView
    data={groupedData}
    renderRow={this.renderRow}
    loading ={this.state.loading}
    onRefresh={this.getAllNewsfeed.bind(this)}
    onLoadMore ={this.loadMoreData.bind(this)}
    loadMoreSpinner={<Spinner/>}
  />

  <Button onPress={this.onLogout.bind(this)}>
    <Text>
        LOGOUT
    </Text>
  </Button>
</Screen>

发布后，您只需将样式道具更改为：

<NavigationBar
  styleName="inline"
  centerComponent={<Title>TITLE</Title>}
/>

我怎样才能使用NavigationBar shoutemui

1 个答案: