不确定为什么按钮不在本机反应的中心

Question

我最近开始使用 React Native 进行编程，我正在尝试实现一个位于屏幕底部中央的按钮，该按钮将在按下时捕获图像。现在，当我运行我的 phone 上的应用程序时，我创建的红色按钮出现在左下角，即使我在样式表中使用 alignItems: 'center' 将它居中。我尝试在样式表中使用 right: '50%' 来查看它是否会出现在屏幕中间，但它没有。我不确定现在该怎么做，这是我的代码：

import { Camera } from 'expo-camera';
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Button, Alert, TouchableNativeFeedback, Image, SafeAreaView } from 'react-native';




export default function App() {
  const buttonClickedHandler = () => {
    console.log('Picture Taken');
  };


  // Camera Permissions
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.back);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      <Camera style={styles.camera} type={type} />
      
      //BUTTON
      <TouchableOpacity
          onPress={buttonClickedHandler}
          style={styles.pictureButton}>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  pictureButton: {
    width: 90,
    height: 90,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderRadius: 100,
    backgroundColor: 'red',
    position: 'absolute',
    bottom: 20,
  },
  container: {
    flex: 1,
  },
  camera: {
    flex: 1,
  },
  text: {
    fontSize: 18,
    color: 'white',
  },
});

Answer 1

绝对定位元素已从文档流中删除，因此 alignItems: 'center' 等属性将被忽略。

尝试使用这样的东西：

 pictureButton: {
    width: 90,
    height: 90,
    padding: 10,
    borderRadius: 100,
    backgroundColor: 'red',
    position: 'absolute',
    bottom: 20,
    left: 50%,
    transform: translateX(-50%),
  }

Here 是对绝对定位如何工作的深入解释

不确定为什么按钮不在本机反应的中心

Unsure why button is not in the center in react native

android

center

button

react-native