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

【问题标题】：Can't align button to the bottom left of the screen - React Native无法将按钮对齐到屏幕的左下角 - React Native
【发布时间】：2019-05-15 13:46:40
【问题描述】：

我想将我的按钮放在屏幕的左下方。我尝试过使用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);

【问题讨论】：

标签： css react-native flexbox

【解决方案1】：

您忘记弯曲容器。添加：flex: 1 那里，你们都很好：

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

【讨论】：

【解决方案2】：

React-native 元素在定义其位置absolutely 时从左上角“渲染”。这意味着当您定义bottom: 0 和left: 0 时，这会将项目水平渲染到您想要的位置，但垂直它将离开屏幕。切换到

position 'absolute',
bottom: 100,
left: 0,

这应该就是你要找的东西

【讨论】：

它仍然会产生相同的结果，但屏幕是空白的。即使尝试使用这些值。
我通过删除样式为“容器”的视图找到了解决方案。如果有人能回答为什么会这样。

【解决方案3】：

你只需要为你的按钮设置一个宽度和高度：

 justifyContent: 'flex-end'

就是这样

App.js

import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import styles from './styles';

class Example extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.text}>Button</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default Example;

styles.js

export default {
  container: {
    flex: 1,
    justifyContent: 'flex-end',
  },

  button: {
    justifyContent: 'center',
    textAlign: 'center',
    width: 70,
    height: 40,
    backgroundColor: 'green',
    borderRadius: 10,
    margin: 20,
  },
  text: {
    color: 'white',
    textAlign: 'center',
    margin: 10,
  },
};

你会得到这样的东西：

查看世博小吃：snack.expo.io/@abranhe/button-left

【讨论】：