如何在react native透明视图上创建自定义UI？

Question

如何创建类似 http://uupload.ir/files/3oar_capture.png 的用户界面在本机？我的问题是我无法在屏幕顶部构建它，它会在屏幕下方呈现。 http://uupload.ir/files/05rm_photo_2019-11-16_15-02-06.jpg

我该如何解决这个问题？如果我将我的自定义组件像条形码掩码一样放在反应相机中，它不会被渲染或显示。

  render() {
    return (
      <React.Fragment>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={{
            flex: 1,
            width: '100%',
          }}
          onGoogleVisionBarcodesDetected={this.barcodeRecognized}>
          <BarcodeMask
            width={250}
            height={250}
            edgeBorderWidth={2}
            edgeColor={'#840F53'}
          />
        </RNCamera>
        <Text>Test component</Text>

      </React.Fragment>
    );
  }
}

QRCodeBuyScreen.navigationOptions = () => ({
  title: 'بارکد',
  header: null,
  tabBarIcon: ({tintColor}) => (
    <Icon name="qrcode-scan" size={30} color={tintColor} />
  ),
});
const styles = StyleSheet.create({

})

export default QRCodeBuyScreen;

Answer 1

我建议你使用react-native提供的Modals，它自带transparent prop。之后您可以根据需要对其进行自定义。

如何在react native透明视图上创建自定义UI？

How to create a custom UI on the transparent view of react native?

reactjs

react-native

react-native-android