无法将按钮与屏幕左下角对齐 - React Native

卢卡斯·法利

我想将我的按钮放在屏幕的左下角。我试过使用bottom: 0and left: 0,但没有做任何事情。我研究了一下,发现我需要设置position: 'absolute'. 但是,当我这样做时,我的按钮完全消失了。

如何通过屏幕左下角的按钮定位?

这是我的代码:

    import React, { Component } from 'react';
import { Button,Alert, TouchableOpacity,Image } from 'react-native'

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

class Project extends Component {
  render() {
    return (
      <View style={{backgroundColor: '#375D81', flex: 1}}>
         <View style = {styles.container}>
           <TouchableOpacity style = {styles.buttonText} onPress={() => { Alert.alert('You tapped the button!')}}>
             <Text>
              Button
             </Text>
           </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
 main: {
   backgroundColor: 'blue'
 },
 container: {
  alignItems: 'center',
 },
  buttonText: {
      borderWidth: 1,
      padding: 25,      
      borderColor: 'black',
      backgroundColor: '#C4D7ED',
      borderRadius: 15,
      bottom: 0,
      left: 0,
      width: 100,
      height: 100,
      position: 'absolute'
   }
});

AppRegistry.registerComponent('Project', () => Project);
设计者

你忘了弯曲你的容器。添加:flex: 1在那里,你们都很好:

container: {
  alignItems: 'center',
  flex: 1
},

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章