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={MyCustomNavBar}添加到您希望工具栏所在的场景中，即可轻松设置导航栏（或Android文字中的工具栏）存在，

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

使用

的containerStyles

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

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

如何使用工具栏反应原生android应用程序

1 个答案: