如何在反应原生android应用程序中使用工具栏
问题描述:
我正在学习react-native
编程,我正在尝试将http://react-native-material-design.github.io/installation集成到材料设计中。如何在反应原生android应用程序中使用工具栏
我想在我的应用程序中使用此http://react-native-material-design.github.io/components/toolbar视图,因为没有关于如何使用它的文档。
任何人都可以帮助我如何在我的应用程序中使用这个视图。提前致谢。
PS:我不想除了使用该https://facebook.github.io/react-native/docs/toolbarandroid.html
答
从不知道你所使用的导航仪,与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和
我安装的iOS(54和64分别地)相同的npm我react-native-router-flux --save,但我得到一个错误'无法解决模块react-native-router-flux' –
你可以重置你的守望者,并执行react-native run-ios或android – eden
这似乎Ť o是一个不同的问题,而不是打包自己。 @Williams – eden