react-native - 我如何使用 NavigationBar sayemui

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。但是当我尝试将其替换为标题时。它仍然有效。但我不想使用标题，因为我想添加按钮或其他相同的东西。

Answer 1

This PR solves it https://github.com/shoutem/ui/pull/104/files but somehow we have removed it from the theme. We are going to fix that in next release but until then you can help yourself by this:

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

After release you will just have to change style prop to:

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