ToolbarAndroid没有显示反应原生

时间:2017-01-24 06:47:07

标签: android react-native react-native-android

我正在学习react-native编程,使用此https://facebook.github.io/react-native/docs/toolbarandroid.html创建工具栏但在我的情况下它没有显示。我无法理解我究竟在做什么错误。

任何人都可以帮助我。

 import React, { Component } from 'react';
 import { AppRegistry, Text, View, TextInput, TouchableOpacity, ToolbarAndroid } from 'react-native';
 import { ToolBar } from 'react-native-material-design';

 class LoginComponent extends Component {
   render() {
     return (
          <View style={{flex: 1, flexDirection: 'column', margin:10}}>

            <ToolbarAndroid title="Login" titleColor="black"/>

            <TextInput style={{height: 40, borderColor:'gray', borderWidth: .5}}
                placeholder="Email address" underlineColorAndroid='transparent'/>

            <TextInput style={{height: 40, borderColor:'gray', borderWidth: .5}}
                placeholder="Password" secureTextEntry={true} underlineColorAndroid='transparent'/>

            <TouchableOpacity style={{ height: 40, marginTop: 10 , backgroundColor: '#2E8B57'}}>
                <Text style={{color: 'white', textAlign: 'center', marginTop: 10, fontWeight: 'bold'}}>LOG IN</Text>
            </TouchableOpacity>
       </View>
     );
   }
 }

 AppRegistry.registerComponent('Myntra', () => LoginComponent);

enter image description here

2 个答案:

答案 0 :(得分:4)

这是known issue。解决方法是为ToolbarAndroid设置高度。

答案 1 :(得分:2)

作为对本机反应的新手,这是我到目前为止发现的最佳解决方案,希望对您有所帮助。 https://github.com/react-native-community/toolbar-android

首先, 添加npm install @react-native-community/toolbar-android --save 要么 纱线爱好者添加yarn add @react-native-community/toolbar-android

第二,运行react-native start命令。

第三次,运行react-native run-android

快乐编码:)