Sposób korzystania z paska narzędzi w reakcji na natywną aplikację Android

Question

Uczę się programowania react-native, gdzie próbuję zintegrować http://react-native-material-design.github.io/installation dla projektu materiałowego.

Chcę użyć tego widoku http://react-native-material-design.github.io/components/toolbar w mojej aplikacji, ponieważ nie ma takiej dokumentacji, jak z niego korzystać.

Czy ktoś może mi pomóc, w jaki sposób mogę użyć tego widoku w mojej aplikacji. Z góry dziękuję.

PS: Nie chcę używać tego https://facebook.github.io/react-native/docs/toolbarandroid.html

Answer 1

Oprócz nie wiedząc, co nawigator używasz, z react-native-router-flux można łatwo Skonfiguruj NavBar (lub pasek narzędzi w Android słowa) poprzez dodanie do navBar={MyCustomNavBar} scena, w której chcesz, aby pasek narzędzi istnieć,

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

i

import MyCustomNavBar from './components' w górnej części nawigatora.

CustomNavBar może być wszystkim, co można sobie wyobrazić. Możesz dodać ikony, przyciski, logo lub nawet animowany pasek wyszukiwania. Wystarczy pamiętać, że w React Native paski narzędzi są ustawione absolutnie i mają stałą wysokość, dlatego wszystkie sceny w Nawigatorze muszą mieć styl marginTop, aby zapobiec nakładaniu się treści. Przykład MyCustomBar może mieć widok owijki, takim jak

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

z containerStyles z

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

wysokości NavBar nie są takie same w Android i iOS (54 i 64)