我如何使用 NavigationBar 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>

但是NavigationBar总是隐藏的，listview在NavigationBar之上。但是当我尝试将它替换为标题时。它仍然有效。但我不想使用标题，因为我想添加返回按钮或其他类似的按钮。

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

How can i use NavigationBar shoutemui

react-native

shoutem