gpt4 book ai didi

android - react native 按钮不可见

转载 作者:行者123 更新时间:2023-11-29 01:09:43 25 4
gpt4 key购买 nike

我正在尝试制作一个简单的登录屏幕,其中我有 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 之外,那么我将变得可见

截图 button not visible

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

最佳答案

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

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

关于android - react native 按钮不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44063588/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com