为什么我的按钮重叠输入文字？

Question

我的按钮正在覆盖我的文字，而不是尊重我的文字。

按钮应位于文本后面的输入文本下方。

你能帮我解决这个问题吗？

import React from 'react';
import { View, Text, TextInput, Button } from 'react-native';

export default props => (
    <View style={{ flex: 1, padding: 10 }}>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',marginTop: 30 }}>
            <Text style={{ fontSize: 25 }}>Teste</Text>
        </View>
        <View style={{ flex: 2}}>
            <TextInput style={{ fontSize: 20, height: 45 }} placeholder='E-mail' />
            <TextInput style={{ fontSize: 20, height: 45 }} placeholder='Senha' />
            <Text style={{ fontSize: 20 }}>Ainda não tem cadastro? Cadastre-se</Text>
        </View>
        <View style={{ flex: 2}}>
            <Button title="Acessar" color='#115E54' onPress={() => false} />
        </View>
    </View>
);

Answer 1

我认为你的代码就像：

<View style={{ flex: 1, padding: 10 }}>
    <Text style={{ fontSize: 25, alignSelf : 'center', marginTop: 30 }}>Teste</Text>
    <TextInput style={{ fontSize: 20, height: 45, marginTop: 20 }} placeholder='E-mail' />
    <TextInput style={{ fontSize: 20, height: 45 }} placeholder='Senha' />
    <Text style={{ fontSize: 20, marginTop: 20 }}>Ainda não tem cadastro? Cadastre-se</Text>
    <View style={{marginTop: 20}}>
        <Button title="Acessar" color='#115E54' onPress={() => false} />
    </View>
</View>

我希望这段代码会有所帮助。

Answer 2

我在Android平台上测试过它的工作正常。 render() { return ( <View style={{ flex: 1, padding: 10 }}> <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 30 }}> <Text style={{ fontSize: 25 }}>Teste</Text> </View> <View style={{ flex: 2 }}> <TextInput style={{ fontSize: 20, height: 45 }} placeholder='E-mail' /> <TextInput style={{ fontSize: 20, height: 45 }} placeholder='Senha' /> <Text style={{ fontSize: 20 }}>Ainda não tem cadastro? Cadastre-se</Text> </View> <View style={{ flex: 2 }}> <Button title="Acessar" color='#115E54' onPress={() => false} /> </View> </View> ); }