2016-05-05 3 views
0

Я пытаюсь использовать ToolbarAndroid на моем реагенте.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 
    } 
}); 

Я затем импортировать этот файл в мой основной файл, в котором компонент визуализируется.

UPDATE

Я применил ширина на панели и теперь он показывает. Но почему мы должны использовать ширину и что уместно, чтобы сделать панель инструментов визуализировать весь экран?

Это ошибка?

ОБНОВЛЕНО стиль

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

ответ

2

Это рабочий пример такого компонента (но не то же самое):

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

Вы должны пройти вид ребенка к ToolbarAndroid. Также использование названий цветов, таких как firebase, не поддерживается из коробки.

Смежные вопросы