预加载页

App.js

@@ -19,8 +19,8 @@ import {
   useColorScheme
 } from 'react-native';
 import { WebView } from 'react-native-webview';
-import { RNCamera } from 'react-native-camera';
 import UseCamera from './src/component/Camera';
+import SplashScreen from 'react-native-splash-screen';
 
 // import {
 //   Colors,
@@ -39,6 +39,15 @@ class App extends Component {
     }
   }
 
+  componentDidMount() {                   //只需添加componentDidMount(){}就行
+    setTimeout(() => {
+        SplashScreen.hide();      //关闭启动屏幕
+    }, 2000);
+  }
+  componentWillUnmount() {
+    this.timer && clearTimeout(this.timer);         //清除计时器
+  }
+
   // 交互传值
   handleInjectJavascript = (data) => {
     console.log('send message: ', data)

ios/Podfile

@@ -12,6 +12,8 @@ target 'test' do
     :hermes_enabled => false
   )
 
+  pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'
+
   target 'testTests' do
     inherit! :complete
     # Pods for testing

package.json

@@ -13,6 +13,7 @@
     "react": "17.0.1",
     "react-native": "0.64.2",
     "react-native-camera": "^4.0.0",
+    "react-native-splash-screen": "^3.2.0",
     "react-native-webview": "^11.6.5"
   },
   "devDependencies": {

src/component/Camera.tsx

@@ -88,7 +88,7 @@ class UseCamera extends Component {
         />
         <View style={styles.toolBar}>
           {/* <View style={styles.transfer}></View> */}
-        { this.props.showPhoto ? (
+        { !this.props.showPhoto ? (
             <View style={styles.circleBtn}>
               <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
                 <View style={styles.innerCapture}>{this.props.showPhoto}</View>

yarn.lock

@@ -5413,6 +5413,11 @@ react-native-codegen@^0.0.6:
     jscodeshift "^0.11.0"
     nullthrows "^1.1.1"
 
+react-native-splash-screen@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npm.taobao.org/react-native-splash-screen/download/react-native-splash-screen-3.2.0.tgz#d47ec8557b1ba988ee3ea98d01463081b60fff45"
+  integrity sha1-1H7IVXsbqYjuPqmNAUYwgbYP/0U=
+
 react-native-webview@^11.6.5:
   version "11.6.5"
   resolved "https://registry.nlark.com/react-native-webview/download/react-native-webview-11.6.5.tgz#34e86a342c6a2cbcf109db98f639f7bb8f055da2"