android - react native 按钮不可见

Question

我正在尝试制作一个简单的登录屏幕，其中我有 2 个 TextInputs 和一个 View 内的按钮。

TextInputs 是可见的，但是当我把它放在 View 中时按钮是不可见的

下面是登录界面的代码

import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  Alert,
  Button
} from 'react-native';


export default class Login extends Component {

    constructor(props) {
         super(props);
        this.state = {};
    }

    onButtonPress= () => {
        Alert.alert('Button has been pressed!');
        };

    render() {
    return (
        <View style={{flexDirection: 'column', padding: 20}}>

            <View style={{justifyContent: 'center',alignItems: 'center',height:250}}>
                <Image style={{height:100}} source={require('../img/jpeg.jpg')} />
            </View>

            <View style={{flex:1}}>
                <TextInput
                    style={{height: 40, borderColor: 'gray', borderWidth: 1,marginBottom:10}}
                    onChangeText={(text) => this.setState({text})}          
                    value={this.state.text}
                    placeholder="Username"
                 />
                 <TextInput
                    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                    onChangeText={(password) => this.setState({password})}          
                    value={this.state.password}
                    placeholder="Password"
                    password={true} 
                 />
                  <Button 
                    onPress={()=> {this.onButtonPress()}}
                    title='Add ToDo'
                    style={{height:40,backgroundColor:'#1e90ff'}}/>         


            </View >   

      </View>
    );
  }

}

添加高度也不起作用。 如果我删除按钮并将其添加到 View 之外，那么我将变得可见

截图

这是一件简单的事情，但行不通。

Answer 1

你忘了在你的 Root View 中添加 flex:1

<View style={{flex:1,flexDirection: 'column', padding: 20}}>