Как я могу использовать NavigationBar shoutemui

Question

Я пытаюсь использовать NavigationBar из инструментария Shoutem UI.

Мой код:

<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. Но когда я пытаюсь заменить его на заголовок. Это все еще работает. Но я не хочу использовать название, потому что я хочу добавить кнопку назад или что-то еще то же самое.

Answer 1

Этот пиар решает его 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>}
/>