错误不变违规：组件div的视图配置getter回调必须是函数（收到undefined）。确保组件名称以大写字母开头。
我不知道为什么它在我的Web应用程序中工作正常，但当我使用我的Android应用程序时，它总是弹出这个错误：（
我想我的问题就在这段代码里：

function Product1() {
  return (

      
    <PayPalScriptProvider options={{ "client-id": "test" }}>
    <PayPalButtons style={{ layout: "horizontal" }} />
</PayPalScriptProvider>


  );
}

为了防止出现更多的错误，这是我的整个代码：

import React, { useEffect } from 'react';
import { Button, View, Text, Image, StyleSheet, ImageBackground, TouchableOpacity, ScrollView, Alert} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";



function Profile() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <ImageBackground source={require('./4.png')} style={styles.image}>
            </ImageBackground>
    </View>
  );
}

function EmptyScreen() {
  return (
    <View style={styles.container}>
            <Image source={require('./3.png')} style={styles.topLeftImage} />
      <View style={styles.box}>
        <Image source={require('./1.png')} style={styles.image} resizeMode="contain"/>
        <Text style={styles.description}>Box 1</Text>
      </View>
      <View style={styles.box}>
        <Image source={require('./2.png')} style={styles.image} resizeMode="contain" />
        <Text style={styles.description}>Box 2</Text>
      </View>
    </View>
  )
}

function Product1() {
  return (

      
    <PayPalScriptProvider options={{ "client-id": "test" }}>
    <PayPalButtons style={{ layout: "horizontal" }} />
</PayPalScriptProvider>


  );
}

function Product({ navigation }){
  return(
    <ScrollView style={{ flex: 1 }}>
    <View style={styles.con}>
    <View style={styles.box1}>
      <Image source={require('./2.png')} style={styles.image} resizeMode="contain" />
      <View style={styles.box3}>
      <Text style={styles.description2}>RM 100</Text>
  </View>
      <Text style={styles.description1}>Product Name</Text>
      <TouchableOpacity style={styles.button} onPress={() => navigation.push('Product1')}>
          <Text style={styles.buttonText}>Check Now</Text>
        </TouchableOpacity>
        
      </View>

      <View style={styles.box1}>
      <Image source={require('./1.png')} style={styles.image} resizeMode="contain" />
      <View style={styles.box3}>
      <Text style={styles.description2}>RM 500</Text>
  </View>
      <Text style={styles.description1}>Product Name</Text>
        <TouchableOpacity style={styles.button} onPress={() => navigation.push('Product1')}>
          <Text style={styles.buttonText}>Check Now</Text>
        </TouchableOpacity>
        
      </View>

      <View style={styles.box1}>
      <Image source={require('./2.png')} style={styles.image} resizeMode="contain" />
      <View style={styles.box3}>
      <Text style={styles.description2}>RM 100</Text>
  </View>
      <Text style={styles.description1}>Product Name</Text>
        <TouchableOpacity style={styles.button} onPress={() => navigation.push('Product1')}>
          <Text style={styles.buttonText}>Check Now</Text>
        </TouchableOpacity>
        
      </View>
    </View>
    </ScrollView>
  )  
}

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Main Page" component={Profile} />
      <Tab.Screen name="Hari Raya" component={EmptyScreen} />
      <Tab.Screen name="Products" component={Product} />
    </Tab.Navigator>
  );
}

function App() {


  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Nagamotorspot"
          component={Home}
          options={{  
            headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#00cc00"
            />
          ), }}
        />
        <Stack.Screen name="EditPost" component={EmptyScreen} />
           <Stack.Screen name="Products" component={Product} />
           <Stack.Screen name="Product1" component={Product1} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  lol: {
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center',
  },
  container: {
    flex: 1,
    backgroundColor: '#000000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  con: {
    flex: 1,
    backgroundColor: '#808080',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: '80%',
    height: 200,
    overflow: 'hidden',
    marginVertical: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box1: {
    width: '80%',
    height: 280,
    borderRadius: 20,
    overflow: 'hidden',
    marginVertical: 10,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000000',
  },
  image: {
    flex: 1,
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
  },
  description: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    color: '#fff',
    paddingVertical: 10,
    paddingHorizontal: 20,
    textAlign: 'center',
    fontWeight: 'bold',
  },
  topLeftImage: {
    position: 'absolute',
    top: 0,
    alignItems: 'center',
    justifyContent: 'center',
    width: 100,
    height: 100,
    resizeMode: 'contain',
  },
  button: {
    marginTop: 10,
    paddingVertical: 8,
    paddingHorizontal: 16,
    backgroundColor: '#00cc00',
    borderRadius: 8,
    width: '100%',
    alignItems: 'center',
    marginTop: 10,
  },
  buttonText: {
    color: '#fff',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  buttonBox: {
    backgroundColor: '#00cc00',
    borderRadius: 20,
    paddingHorizontal: 40,
    paddingVertical: 10,
  },
  description1: {
    position: 'absolute',
    bottom: 40,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    color: '#fff',
    paddingVertical: 10,
    paddingHorizontal: 20,
    textAlign: 'center',
    fontWeight: 'bold',
  },
  description2: {
    position: 'absolute',
    bottom: -10,
    left: 19,
    color: '#fff',
    paddingVertical: 10,
    paddingHorizontal: 20,
    fontWeight: 'bold',
  },
  box3: {
    backgroundColor: "#FF6961",
    width: '30%',
    height: 40,
    borderRadius: 20,
    bottom: 200,
    left: -120,
  }
});


export default App;