Question

当我将项目导出到Web时，我想运行componentdidmount方法，我需要为我的项目设置自定义字体，例如：

import React from 'react'
import { View, Text, StyleSheet, Platform, Image } from 'react-native'
import * as Font from "expo-font";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { "fontLoaded": false}
  }
  
  async componentDidMount() {
    alert("test")
    try {
      await Font.loadAsync({
        'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
        });

      this.setState({ "fontLoaded": true });
    } catch (error) {
      alert(error);
    }
  }

  render() {
    return (
       <View style={styles.container}>
      {this.state.fontLoaded ? ( 
        <View style={styles.container}>
          <Text style={styles.text}>My Text!</Text>
        </View>
        ) : (
          <View style={styles.container}>
          <Text>Loading...!</Text>
        </View>
        )}
        </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontFamily: 'Inter-SemiBoldItalic',
    fontSize: 20,
    margin: 20,
  }
});

请注意，当我使用命令expo build:web（没有nextjs）导出expo项目时，它确实可以运行并运行componentDidMount（），还加载了我的字体，最后在屏幕上显示了My Text!

但是当我想使用命令yarn export导出我的expo + nextjs项目时componentDidMount（）不起作用，字体不会加载，而只是在屏幕上显示Loading...!

如何解决？

导出expo + nextjs项目后componentdidmount（）不运行

0 个答案: