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

但導航欄總是隱藏，上面的列表視圖導航欄。但是，當我嘗試將其替換爲標題。它仍然有效。但我不想使用標題，因爲我想要添加按鈕或其他相同的東西。

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