javascript - ToolBarAndroid 未在 React Native 中呈现

Question

我试图让一个基本的 Android 工具栏呈现在我的 React native View 上，但我遇到了麻烦。使用我当前的代码，它运行良好(没有错误或任何错误)，但工具栏不存在。关于我做错了什么有什么建议吗？提前致谢!

    '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

您需要为工具栏指定高度和宽度，否则它不会呈现。

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

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

选择 Action

     onActionSelected(position) {
     }

工具栏样式

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

结果