如何在反應原生android應用程序中使用工具欄

Question

我正在學習react-native編程，我正在嘗試將http://react-native-material-design.github.io/installation集成到材料設計中。

我想在我的應用程序中使用此http://react-native-material-design.github.io/components/toolbar視圖，因爲沒有關於如何使用它的文檔。

任何人都可以幫助我如何在我的應用程序中使用這個視圖。提前致謝。

PS：我不想除了使用該https://facebook.github.io/react-native/docs/toolbarandroid.html

Answer 1

從不知道你所使用的導航儀，與react-native-router-flux你可以輕鬆地設置的NavBar（或工具欄在Android的話）通過簡單地添加navBar={MyCustomNavBar}到場景，您希望您的工具欄存在，

<Scene sceneStyle={{marginTop: Metrics.navBarHeight}} component={HomeScreen} key="home" navBar={MyCustomNavBar}/> 

和

import MyCustomNavBar from './components'在您的導航儀的頂部。

CustomNavBar可以是任何你能想象的。您可以添加圖標，按鈕，標誌甚至動畫搜索欄。請注意，在React Native中，工具欄絕對定位，並且它們具有固定的高度，因此導航器中的所有場景都必須具有marginTop樣式，以防止內容重疊。一個例子MyCustomBar可以具有一個包裝視圖諸如

render() { 
return (
    <View style={containerStyle}> 
     ... 
    </View> 
) 
} 

與

container: { 
    position: 'absolute', 
    top: 0, 
    left: 0, 
    right: 0, 
    height: Metrics.navBarHeight, 
    } 

的NavBar高度containerStyles不在Android和