react-native - React-Native-Paper 表面组件未加载

Question

我有一个加载到我的应用程序中的组件，但是我无法加载 Surface 组件。它里面的文本渲染得很好，但是父 Surface 组件却没有。它也不会出现在检查器中

我的组件在下面。有任何想法吗？

import React, {useState, useContext} from 'react';
import {StyleSheet, View} from 'react-native';
import {Surface, Text} from 'react-native-paper';

function UpComing({navigation}) {
  return (
    <View style={styles.container}>
      <Text style={{fontWeight: 'bold', fontSize: 15}}>Upcoming Classes</Text>
      <Surface styles={styles.surface}>
        <Text>Test</Text>
      </Surface>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: 20,
    marginVertical: 10,
  },
  surface: {
    padding: 8,
    height: 80,
    width: 80,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 4,
  },
});

export default UpComing;