React Native开发问题：调用GetPlayer组件无显示且无控制台报错

问题场景 #

我正在学习React Native Hooks及创建可复用组件，调用GetPlayer组件后，运行代码时屏幕无任何内容显示，且控制台未抛出任何异常。想确认调用方式是否正确，或是遗漏了什么？相关代码及文件夹结构如下：

App.js 原代码 #

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import GetPlayer from './GetPlayer';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <GetPlayer />
      <StatusBar style="auto" />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

GetPlayer.js 原代码 #

import { View } from "react-native-web"


export default function GetPlayer(){
    return (
        <View style={styles.container}>
            <Text>Test </Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

文件夹结构 #

问题原因及修正方案 #

组件调用方式本身是正确的，但GetPlayer组件存在3处关键错误：

• 错误1：导入了错误的View组件
  你从react-native-web导入View，这是React Native Web适配库的组件，在原生React Native项目中会导致组件无法正常渲染，应该从react-native导入。

• 错误2：未导入Text组件
  GetPlayer组件中使用了<Text>标签，但没有从react-native导入该组件，React Native无法识别这个元素。

• 错误3：未导入StyleSheet
  组件中使用了StyleSheet.create，但没有导入StyleSheet模块，导致样式无法生效。

修正后的GetPlayer.js代码 #

// 修正导入：从react-native导入所需组件
import { View, Text, StyleSheet } from "react-native"

export default function GetPlayer(){
    return (
        <View style={styles.container}>
            <Text>Test </Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
});

额外提示：原App.js的容器已设置flex:1和居中对齐，GetPlayer的容器也设置flex:1可能会导致布局占满剩余空间。如果希望Test文本和App.js里的文本一起居中显示，可以调整GetPlayer的样式，比如去掉flex:1，改为marginTop: 20，避免布局冲突。

内容的提问来源于stack exchange，提问作者Jim