如何使用工具栏反应原生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轻松设置导航栏（或 Android 中的工具栏） ，navBar={MyCustomNavBar}

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

和

import MyCustomNavBar from './components'在导航器的顶部。

CustomNavBar 可以是您能想象到的任何内容。您可以添加图标、按钮、徽标甚至动画搜索栏。请注意，在 React Native 中，工具栏是绝对定位的，并且具有固定的高度，因此 Navigator 中的所有场景都必须具有 marginTop 样式，以防止内容重叠。示例 MyCustomBar 可以有一个包装视图，例如

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

与containerStyles的

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

Android 和 iOS 中的导航栏高度不同（分别为 54 和 64）