css - 无法将按钮对齐到屏幕的左下角 - React Native

Question

我想将我的按钮放在屏幕的左下角。我试过使用 bottom: 0 和 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);

Answer 1

您忘记了 flex 您的容器。添加:flex: 1 就可以了:

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