ToolBarAndroid не рендеринг в ReactNative

Question

Я пытаюсь получить базовую панель инструментов Android для рендеринга в собственном представлении React, и у меня возникают проблемы. С моим текущим кодом он работает нормально (никаких ошибок или чего-то еще), но панели инструментов там нет. Любые предложения относительно того, что я делаю неправильно? Заранее спасибо!

'use strict'; 
    const React = require('react-native'); 
    const MaterialKit = require('react-native-material-kit'); 
    const { 
     AppRegistry, 
     DrawerLayoutAndroid, 
     StyleSheet, 
     Text, 
     View, 
     ToolbarAndroid, 
    } = React; 

    const DRAWER_REF = 'drawer'; 

    const OpenLightApp = React.createClass({ 
     render: function() { 
     const navigationView = (
      <View style={{flex: 1, backgroundColor: '#88D8EC'}}> 
      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>Drawer Item</Text> 
      </View> 
     ); 

     return (

      <DrawerLayoutAndroid 
      drawerWidth={300} 
      ref={DRAWER_REF} 
      drawerPosition={DrawerLayoutAndroid.positions.Left} 
      renderNavigationView={() => navigationView}> 
      <View style={styles.container}> 
      <ToolbarAndroid 
       navIcon={require('image!hamburger')} 
       title="OpenLight" 
       titleColor="black" 
       style={styles.toolbar} 
       onIconClicked={() => this.refs[DRAWER_REF].openDrawer()} /> 
       <Text style={styles.welcome}> 
       Example Text 
       </Text> 
       <Text style={styles.instructions}> 
       To get started, edit index.android.js 
       </Text> 
       <Text style={styles.instructions}> 
       Shake or press menu button for dev menu 
       </Text> 
      </View> 
      </DrawerLayoutAndroid> 
     ); 
     } 
    }); 

    const styles = StyleSheet.create({ 
     container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: '#F5FCFF', 
     }, 
     welcome: { 
     fontSize: 20, 
     textAlign: 'center', 
     margin: 10, 
     }, 
     instructions: { 
     textAlign: 'center', 
     color: '#333333', 
     marginBottom: 5, 
     }, 
     toolbar: { 
     backgroundColor: '#00a2ed', 
     height: 56, 
     }, 
    }); 

    AppRegistry.registerComponent('OpenLightApp',() => OpenLightApp); 

Answer 1

Согласно this issue, ключ, кажется, настройки стиля на панели инструментов, которая имеет высоту. Если высота не установлена, она не будет отображаться. Надеюсь, он скоро будет решен.

Answer 2

Вот это сочетание вещей, которые работали для меня:

1) https://github.com/facebook/react-native/issues/2957#event-417214498

«Вы должны установить alignItems растягивать (который также по умолчанию) на контейнере, или дайте панели инструментов явным . ширина с alignItems установлена ​​в центр и не явной шириной, панель дается 0 неявная шириной "

2) Установка высоты на панели инструментов

код:.

Я скачал ic_arrow_back_black_24dp.png, и поместил его в той же папке, как файл в index.android.js

Тогда в index.android.js,

class MyComponent extends Component { 
... 
render() { 
    return (

     <View style={styles.containerToolbar}> 
     <ToolbarAndroid style={styles.toolbar} 
         title={this.props.title} 
         //navIcon={require('image!ic_arrow_back_white_24dp')} 
         navIcon={require('./ic_arrow_back_black_24dp.png')} 
         onIconClicked={this.props.navigator.pop} 
         //titleColor={'#FFFFFF'}/> 
         titleColor={'#000000'}/> 
    </View> 

} 

const styles = StyleSheet.create({ 
    containerToolbar: { 
    flex: 1, 
    //justifyContent: 'center', 
    justifyContent: 'flex-start', 
    // https://github.com/facebook/react-native/issues/2957#event-417214498 
    alignItems: 'stretch', 
    backgroundColor: '#F5FCFF', 
    }, 
    toolbar: { 
    backgroundColor: '#e9eaed', 
    height: 56, 
    }, 

}); 

Answer 3

Вам необходимо назначить как высота, так и ширина панели инструментов, иначе она не будет отображаться.

Ваш код на панели инструментов должен выглядеть следующим образом

  <ToolbarAndroid 
      style={styles.toolbar} 
      title="Movies" 
      navIcon={require("../../ic_launcher.png")} 
      onActionSelected={this.onActionSelected} 
      titleColor= "000" 
      actions = {[ 
       {title: "Log out", show: "never"} 
      ]} 
      /> 

О действии выбран

 onActionSelected(position) { 
    } 

Стиль для инструментальной панели

toolbar: { 
    backgroundColor: '#2196F3', 
    height: 56, 
    alignSelf: 'stretch', 
    textAlign: 'center', 
}, 

Результат