android - 如何在 React Native Android 应用程序中使用工具栏

Question

我正在学习 react-native 编程，我正在尝试集成 http://react-native-material-design.github.io/installation用于 Material 设计。

我想用这个http://react-native-material-design.github.io/components/toolbar在我的应用程序中查看，因为没有关于如何使用它的文档。

任何人都可以帮助我如何在我的应用程序中使用此 View 。提前致谢。

PS:我不想用这个https://facebook.github.io/react-native/docs/toolbarandroid.html

Answer 1

除了不知道你使用的是什么导航器之外，使用 react-native-router-flux 你可以通过简单地添加 navBar= {MyCustomNavBar} 到您希望工具栏存在的场景，

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

和

从导航器顶部的“./components” 导入 MyCustomNavBar。

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

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

与containerStyles的

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

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