React Native 上的造型相机

问题描述

在屏幕上，我想以这种方式扫描门票：

class Tickets extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Press: false,hasCameraPermission: null,reference: '',lastScannedUrl:null,displayArray: []      
    };
  }

   initListData = async () => {
    let list = await getProductByRef(1);
   
    if (list) {
      this.setState({
        displayArray: list,reference: list.reference
      });      
    }
    console.log('reference dans initListData =',list.reference)
  };

  async UNSAFE_componentwillMount() {
    this.initListData();
    console.log('reference dans le state =',this.state.reference)

};

  componentDidMount() {
    this.getPermissionsAsync(); 
  }

  getPermissionsAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === "granted" });
  };

  _onPress_Scan = () => {
    this.setState({
      Press: true
    });
  }

  handleBarCodeScanned = ({ type,data }) => {
    this.setState({ Press: false,scanned: true,reference: data });
    this.props.navigation.navigate('ProductDetails',{reference : parseInt(this.state.state.reference)})
  };

  renderBarcodeReader = () => {
    const { hasCameraPermission,scanned } = this.state;

    if (hasCameraPermission === null) {
      return <Text>{i18n.t("scan.request")}</Text>;
    }
    if (hasCameraPermission === false) {
      return <Text>{i18n.t("scan.noaccess")}</Text>;
    }
    return (
      <View
        style={{
          flex: 1,...StyleSheet.absoluteFillObject
        }}
      >
        <BarCodeScanner
          onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
          style={{ flex:1,...StyleSheet.absoluteFillObject}}
        />
        {scanned && (
          <Button
            title={"Tap to Scan Again"}
            onPress={() => this.setState({ scanned: false })}
          />
        )}    
      </View>
    );
  }
  
  render() {
    const { hasCameraPermission,scanned,Press } = this.state;
    let marker = null;

  console.log('displayArray',this.state.displayArray,'reference',this.state.displayArray.reference)
    return (
      <View style={{flex:1}}>
        <KeyboardAvoidingView behavior="padding" enabled style={{flex:1}}> 
          <ScrollView contentContainerStyle={{flexGrow: 1 }} >
            {Press ? (
              <View style={{flex:1}}>
                {this.renderBarcodeReader()}
              </View>
            ) : (
              <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Button
                  color="#F78400"
                  title={i18n.t("scan.scan")}
                  onPress={this._onPress_Scan}>                    
                </Button>
             </View>
            )}
          </ScrollView>
        </KeyboardAvoidingView>
      </View>
    );
  }
}
export default Tickets;

这段代码给了我

如您所见，我有一个顶部和底部边距。我希望没有空间，让相机拍摄整个屏幕（以及在相机图像上显示的任何按钮） 我该怎么做，我应该改变哪个元素的样式？

感谢您的帮助和解释

解决方法

你能留下你那部分的代码吗？现在一切正常，但我相信图像的宽度和高度是静态的，并且您没有对该图像使用 resizeMode，对于相机，它会有所不同。 您可以检查您正在使用的相机库的 resizeMode