React native 我能'；不要在android emulator上显示我的自定义按钮

我参加了一个演示按钮成功的教程，但我的按钮在同一代码中显示为一行。为什么？原因是我的模拟器是Android而不是IOS

以下是我的自定义按钮设置：

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ onPress, children }) => {

    const { buttonStyle, textStyle } = styles;

    return (
        <TouchableOpacity onPress={onPress} style={buttonStyle}>
            <Text style={textStyle}>
                {children}
            </Text>
        </TouchableOpacity>
    );
};

const styles = {
    textStyle: {
        alignSelf: 'center',
        color: '#007aff',
        fontSize: 16,
        fontWeight: '600',
        paddingTop: 10,
        paddingBottom: 10
    },
    buttonStyle: {
        flex: 1,
        alignSelf: 'stretch',
        backgroundColor: '#fff',
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#007aff',
        marginLeft: 5,
        marginRight: 5
    },
};
export { Button };

从“React”导入React；
从“react native”导入{Text，TouchableOpacity}；
常量按钮=（{onPress，children}）=>{
const{buttonStyle，textStyle}=样式；
返回(
{儿童}
);
};
常量样式={
文本样式：{
对齐自我：“中心”，
颜色：“#007aff”，
尺寸：16，
重量：'600'，
paddingTop:10，
垫底：10
},
按钮样式：{
弹性：1，
自我定位：“拉伸”，
背景颜色：“#fff”，
边界半径：5，
边框宽度：1，
边框颜色：“#007aff”，
边缘左：5，
marginRight:5
},
};
导出{按钮}；

这是我的按钮：

import React, { Component } from 'react';
import { View } from 'react-native';
import firebase from 'firebase';
import { Header, Button } from './components/common';
import LoginForm from './components/LoginForm';


class App extends Component {
    state = { loggedIn: false };

    componentWillMount() {
        firebase.initializeApp({
            apiKey: "AIzaSyAW3A_RYT0Hn73j-HjpFBzAV4lrJnsUATI",
            authDomain: "auth-4ff37.firebaseapp.com",
            databaseURL: "https://auth-4ff37.firebaseio.com",
            projectId: "auth-4ff37",
            storageBucket: "auth-4ff37.appspot.com",
            messagingSenderId: "524723794907"
        });

        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                this.setState({ loggedIn: true });
            } else {
                this.setState({ loggedIn: false })
            }
        });
    }

    renderContent() {
        if (this.state.loggedIn) {
            return (
                // It show a blue line not a button
                <Button>
                    Log out
                </Button>
            );
        }

        return <LoginForm />;
    }


    render() {
        return (
            <View>
                <Header headerText="App title bar" />
                {this.renderContent()}
            </View>
        );
    }
}

export default App;

import React，{Component}来自'React'；
从“react native”导入{View}；
从“firebase”导入firebase；
从“./components/common”导入{Header，Button}；
从“./components/LoginForm”导入LoginForm；
类应用程序扩展组件{
状态={loggedIn:false}；
组件willmount（）{
firebase.initializeApp({
apiKey：“AIzaSyAW3A_RYT0Hn73j-HjpFBzAV4lrJnsUATI”，
authDomain:“auth-4ff37.firebaseapp.com”，
数据库URL:“https://auth-4ff37.firebaseio.com",
projectId:“auth-4ff37”，
storageBucket:“auth-4ff37.appspot.com”，
messagingSenderId：“524723794907”
});
firebase.auth（）.onAuthStateChanged（（用户）=>{
如果（用户）{
this.setState（{loggedIn:true}）；
}否则{
this.setState（{loggedIn:false}）
}
});
}
renderContent（）{
if（this.state.loggedIn）{
返回(
//它显示一条蓝线而不是一个按钮
注销
);
}
返回；
}
render（）{
返回(
{this.renderContent（）}
);
}
}
导出默认应用程序；

这是我的文件根目录：

我应该为Android设置一些特殊的设置吗

任何帮助都将不胜感激，提前谢谢

左边的照片是<代码>返回右侧照片为<代码>返回( 注销 );

---

现在有按钮外观的屏幕截图吗？你的标题显示正确吗？当然，我上传了照片，我使用了相同的自定义按钮，右边是不正确的。你能尝试在按钮样式中添加marginTop:50吗？我猜一定是款式有问题。可能只是查看LoginForm容器样式并与按钮容器样式进行比较。我尝试使用marginTop:50，它仍然显示一条蓝线，但我接受你的建议，再次比较设置，我尝试使用与左侧照片相同的布局，外部有一个卡片部分。最后我看到一个按钮成功了。但是教程只使用了一个

，虽然他在IOS模拟器上运行，但这让我很困惑。不管怎样，谢谢你的帮助，你帮了我一点。很高兴它帮了我：）