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: 1并且你一切都很好：

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

Answer 2

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

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

这应该是你要找的东西

Answer 3

您只需要为按钮设置宽度和高度，然后即可：

!EXCEPT = 2

就这样

App.js

 justifyContent: 'flex-end'

styles.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;

您将获得以下内容：

请参阅博览会零食：snack.expo.io/@abranhe/button-left

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

3 个答案: