ReactNative & Expo：Ionicon 未渲染

Question

根据文档，如果我安装了 Expo，除了导入语句之外，我不需要做任何其他事情。

我的组件：

import React, { useContext } from "react"
import { StyleSheet, View, TouchableOpacity } from "react-native"
import { MusicContext } from "../context/MusicContext"
import { Ionicons } from "@expo/vector-icons"
export const MusicPlayer = () => {
const { previousTrack, pauseAndPlay, nextTrack, isPlaying } = useContext(MusicContext)
return (
<View style={styles.musicPlayerContainer}>
<View style={styles.controls}>
<TouchableOpacity style={styles.control} onPress={previousTrack}>
<Ionicons name="md-skip-backward" size={24} color="black" />
</TouchableOpacity>
<TouchableOpacity style={styles.control} onPress={pauseAndPlay}>
{isPlaying ? (
<Ionicons name="md-pause" size={24} color="black" />
) : (
<Ionicons name="md-play-circle" size={24} color="black" />
)}
</TouchableOpacity>
<TouchableOpacity style={styles.control} onPress={nextTrack}>
<Ionicons name="md-skip-forward" size={24} color="black" />
</TouchableOpacity>
</View>
</View>
)
}

根据图标目录，https://icons.expo.fyi/，我得到了我需要的一切，但图标没有呈现。

它们看起来像带有 X 的小盒子。

我该如何解决这个问题？ 谢谢！

Answer 1

确保您使用的是适当的 babel 预设。 初始化一个新项目并将 babel.config.js 与项目中的项目进行比较