React Native 白色有什么不好?

umuewwlo  于 2023-01-27  发布在  React
关注(0)|答案(1)|浏览(92)

我试图给一个白色的圆形边框的TouchableOpacity,但白色转换成灰色的黑色背景,谁能告诉我如何解决这个问题,使其白色?TouchableOpacity是一个圆形。我使用的TouchableOpacity由react-native和相机,我使用expo-camera,因为我使用react native expo
我的代码:

export default function CameraUncle({ navigation }) {
  const [hasPermission, setHasPermission] = useState(null);
  const cameraRef = useRef(null);
  const [faceData, setFaceData] = useState([]);

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

  if (hasPermission === null) {
    return <View />;
  }

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

  const handleTakePicture = async () => {
    if (faceData.length === 0) {
      alert('No Face')
    }
    else if
      (cameraRef.current) {
      const photo = await cameraRef.current.takePictureAsync();
      console.log(photo.uri)
      if (!photo.cancelled) {
        navigation.navigate('addpost', { postImage: photo.uri });
      }
    }
  }

  const handleFacesDetected = ({ faces }) => {
    setFaceData(faces);
  }

  return (
    <View style={{ flex: 1, backgroundColor: 'black' }}>
      <Camera
        onFacesDetected={handleFacesDetected}
        faceDetectorSettings={{
          mode: FaceDetector.FaceDetectorMode.fast,
          detectLandmarks: FaceDetector.FaceDetectorLandmarks.none,
          runClassifications: FaceDetector.FaceDetectorClassifications.none,
          minDetectionInterval: 100,
          tracking: true,
        }}
        style={{
          borderTopLeftRadius: 30,
          borderTopRightRadius: 30,
          borderBottomLeftRadius: 30,
          borderBottomRightRadius: 30,
          overflow: 'hidden',
          width: '130%',
          aspectRatio: 1,
        }}
        type={Camera.Constants.Type.front}
        ref={cameraRef}
      >

        <View style={{ flex: 1, backgroundColor: 'transparent', flexDirection: 'row' }}>

        </View>
      </Camera>
      <View style={{
        alignSelf: 'center',
        alignItems: 'center',
        width: 90,
        height: 90,
        borderRadius: 500,
        marginTop: '30%',
        marginLeft: '5%',
        borderColor: 'white',
        borderWidth: 4
      }}>
        <TouchableOpacity
          onPress={handleTakePicture}
        >
          <View style={{ opacity: 0.5 }} />
        </TouchableOpacity>
      </View>

    </View >
  );
}
yqyhoc1h

yqyhoc1h1#

看起来React Native在做样式时并不是直接的CSS替代品。
我相信您使用CSS获得的边界速记不能直接转移到设备上,px单位也不是一个东西。
但是玩React Native并使用它的Android模拟器,这似乎是可行的。更新:刚刚测试了iOS模拟器,它似乎也工作.

borderColor: 'white',
borderWidth: 4

完整工作代码-〉

import React, {useState} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(prevCount => prevCount + 1);

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text>Count: {count}</Text>
      </View>
      <View style={{
        alignSelf: 'center',
        alignItems: 'center',        
        marginTop: '30%',
        marginLeft: '5%',
      }}>
        <View style={{
           borderRadius: 90,
           borderColor: 'white',
           borderWidth: 4,
        }}>
        <TouchableOpacity
          style={{
            width: 90, height: 90, 
            backgroundColor: 'pink', 
            opacity: 0.5,
            borderRadius: 90}}
          onPress={() => setCount(c => c + 1)}
        >        
        </TouchableOpacity>
        </View>
      </View>

    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
    backgroundColor: 'silver'
  },
  countContainer: {
    alignItems: 'center',
    padding: 10,
  },
});

export default App;

相关问题