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

Question

我的按钮覆盖了我的文本，不符合我的 flex。

按钮应该在文本之后的底部，输入文本的下方。

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

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>
    );
  }

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

Why my button overlapping my input Text?

react-native

react-native-android

react-native-ios