时间戳

首页 > 解决方案 > ReactNative & Expo：离子不渲染

reactjs - ReactNative & Expo：离子不渲染

问题描述

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

我的组件：

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 的小盒子。

我怎样才能解决这个问题？谢谢！

标签： reactjsreact-nativeiconsexpoionicons

解决方案

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

推荐阅读