Question

我正在尝试创建一个简单的登录屏幕，其中我有2个TextInputs和一个视图内的按钮。

TextInputs可见，但当我将其保留在视图

中时，该按钮不可见

以下是登录屏幕的代码

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

}

添加高度也无法正常工作。如果我删除按钮并将其添加到视图之外，那么我将变得可见

截图

这很简单，不起作用。

Answer 1

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

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

Answer 2

由于文字或背景颜色，它可能不可见。尝试将Button元素的color属性设置为某种颜色。例子 -

<Button  onPress={()=> {this.onButtonPress()}}
         title='Add ToDo'
         color='#841584'
         style={{height:40,backgroundColor:'#1e90ff'}}/>

react-native按钮不可见

2 个答案: