react-native按钮不可见 [英] react-native button not visible

问题描述

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

I'm trying to make a simple login screen where i have 2 TextInputs and a button inside a view.

TextInputs可见，但是当我将其保留在视图中时按钮不可见

The TextInputs are visible,but the button is not visible when i keep it inside the 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>
    );
  }

}

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

adding the height is also not working. if i remove the button and add it outside the view then i becomes visible

屏幕截图

这很简单，无法正常工作.

It's a simple thing and not working.

推荐答案

您忘记在根视图中添加flex:1

you forgot to add flex:1 at your root view

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

这篇关于react-native按钮不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！