如何使用导航栏 shoutemui.

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>

但是导航栏

总是隐藏的，列表视图在导航栏上方。但是当我尝试将其替换为标题时。它仍然有效。但我不想使用标题，因为我想添加按钮或其他类似的东西。

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>}
/>