我无法在Android模拟器上显示我的自定义按钮

Question

我接受一个显示按钮成功的教程，但我的按钮在同一代码中显示为一行。为什么？原因是我的模拟器是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 };

这是我打电话给按钮：

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;

这是我的文件根目录：

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

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

左侧照片为return <LoginForm />;右侧照片为return ( <Button> Log out </Button> );