ToolBarAndroid 未在 ReactNative 中呈现答案

【问题标题】：ToolBarAndroid not rendering in ReactNativeToolBarAndroid 未在 ReactNative 中呈现
【发布时间】：2015-12-07 00:00:04
【问题描述】：

我正在尝试获取一个基本的 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);

【问题讨论】：

你有没有想过这个问题？有完全相同的问题。
在 0.26 版中，DrawerLayoutAndroid 似乎需要将#drawerHeight 设置为任意值才能被挂载。从 0.27.1 开始，DrawerLayoutAndroid 不再需要高度。

标签： javascript android react-native

【解决方案1】：

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

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

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

结果

【讨论】：

如果我们有多个动作，我们如何在onActionSelected中获得位置

【解决方案2】：

根据this issue，关键似乎是在具有高度的工具栏上设置样式。如果没有设置高度，则不会渲染。希望尽快解决。

【讨论】：

【解决方案3】：

以下是对我有用的组合：

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

});

【讨论】：