Question

按钮在android中不可见。

渲染方法：

render() {
    return (
        <View style = { styles.container }>
            <View style = { styles.form }>
                <Image source={require('../../assets/icon.png')} style = {styles.loginIcon}/>
                <View style = { styles.form }>
                    <TextInput style={ styles.input } onChangeText={(username) => this.setState({username})} placeholder="Username"/>
                    <TextInput style={ styles.input }  onChangeText={(password) => this.setState({password})} placeholder="Password"/>
                    <View style={ styles.buttonView }>
                        <Button title="Login" color="#197DC1" style={ styles.primaryBttn } onPress={this.validateCredentialsAndLogin.bind(this)}/>
                    </View>
                    <Text>
                        Forgot Password?
                    </Text>
                </View>
            </View>
        </View>
    );
}

CSS ：

 container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ECF0F1'//#F5FCFF
},

form :{
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    flexDirection: 'column',
    marginTop: '25%',
    marginBottom:'25%',
    paddingTop:'10%',
    width:'90%',
    height:'40%'
},
input:{
    height:40,
    marginBottom:10,
    borderBottomColor: 'black',
    width:'100%'
},
loginIcon:{
    width:80,
    height:80,
},
buttonView:{
    flex:1,
    width:'100%',
    height:50
}

即使父母有弹性，按钮的高度和颜色仍然无法查看按钮。 PS：我是新来的反应 - 本地人纠正我如果我对样式或其他任何东西都错了。

Answer 1

看起来问题与你的造型有关。您可以通过以下方式看到您的按钮，只需替换您的表单样式：

form:{
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    flexDirection: 'column',
    width:'90%',
    height:'40%'
  },

您应首先了解如何使用flexbox(link)设置样式。

反应原生按钮不可见Android

1 个答案: