Question

我正在尝试在我的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 = (
          <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"}
            ]}
            />

选择操作

     onActionSelected(position) {
     }

工具栏样式

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

<强>结果

Answer 2

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

Answer 3

以下是对我有用的事情组合：

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

＆＃34;您应该将alignItems设置为容器上的拉伸（这也是默认值），或者为工具栏指定显式宽度。将alignItems设置为居中且没有明确的宽度，工具栏将被赋予0隐式宽度。＆＃34;

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

});

ToolBarAndroid无法在ReactNative中渲染

3 个答案: