ToolBarAndroid无法在ReactNative中渲染

我正在尝试在我的React原生视图上渲染一个基本的Android工具栏,我遇到了麻烦.使用我当前的代码,它运行正常(没有错误或任何东西),但工具栏不存在.关于我做错了什么的任何建议？提前致谢!

    '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 = (
          
            Drawer Item
          
        );

        return (

           navigationView}>
            
             this.refs[DRAWER_REF].openDrawer()} />
              
                Example Text
              
              
                To get started, edit index.android.js
              
              
                Shake or press menu button for dev menu
              
            
          
        );
      }
    });

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

Hitesh Sahu.. 15

您需要为工具栏指定高度和宽度,否则它不会渲染.

您的工具栏代码应如下所示

选择动作

     onActionSelected(position) {
     }

工具栏的样式

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

结果

您需要为工具栏指定高度和宽度,否则它不会渲染.

您的工具栏代码应如下所示

选择动作

     onActionSelected(position) {
     }

工具栏的样式

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

结果

根据这个问题,关键似乎是在工具栏上设置一个具有高度的样式.如果未设置高度,则不会渲染.希望很快得到解决.

以下是对我有用的组合:

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

"你应该在容器上设置alignItems拉伸(这也是默认值),或者给你的工具栏一个明确的宽度.将alignItems设置为center并且没有明确的宽度,工具栏给出0隐式宽度."

2)在工具栏上设置高度

代码:

我下载了ic_arrow_back_black_24dp.png,并将其放在与index.android.js文件相同的文件夹中

然后在index.android.js中,

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

      
       
                       titleColor={'#000000'}/>
     

}

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

});