ToolbarAndroid无法渲染

时间:2016-05-05 09:39:40

标签: react-native

我试图在我的React Native Project上使用 ToolbarAndroid

但工具栏未呈现。我错过了什么吗?

以下是片段:

toolbar.js

import React, {
    Component
} from 'react';
import {
    View,
    Text,
    ToolbarAndroid,
    StyleSheet
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

export default class Toolbar extends Component {
    render() {
        return(
            <Icon.ToolbarAndroid
                title = {this.props.title}
                titleColor = 'black'
                navIconName = "android-menu"
                style = {styles.toolbar}
            />
        );
    }
}

const styles = StyleSheet.create({
    toolbar: {
        backgroundColor: 'firebrick',
        height: 56
    }
});

然后我将此文件导入到我的主文件中,在该文件中呈现组件。

更新

我将宽度应用于工具栏,现在它正在显示。但为什么我们必须使用宽度以及使工具栏在整个屏幕上渲染的适当值?

这是一个错误吗?

更新后的广告

const styles = StyleSheet.create({
    toolbar: {
        backgroundColor: 'firebrick',
        height: 56,
        width: 300
    }
});

1 个答案:

答案 0 :(得分:2)

这是这种组件的一个工作示例(但不一样):

<ToolbarAndroid
  title = {this.props.title}
  titleColor = 'black'
  navIconName = "android-menu"
>
  <View style={styles.toolbar}>
    <Text>{this.props.title}</Text>
  </View>
</ToolbarAndroid>

您必须将子视图传递给ToolbarAndroid。此外,不支持使用firebase等颜色名称。