在Expo中使用React钩子实现react Native functional component中的Native base

Question

我正在尝试使用带有功能组件的世博会原生基库。然而，Native基础文档展示了如何在Class组件中使用它，如下所示：

import React from 'react';
import { AppLoading } from 'expo';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
      ...Ionicons.font,
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }

    return (
      <Container>
        <Text>Open up App.js to start working on your app!</Text>
      </Container>
    );
  }
}

我尝试转换它的方式如下所示：

import { StatusBar } from "expo-status-bar";
import React, { useState, useEffect } from "react";
import { StyleSheet, View } from "react-native";

import { AppLoading } from "expo";
import * as Font from "expo-font";
import { Ionicons } from "@expo/vector-icons";

import { Container, Text } from "native-base";

export default function App() {
  [isReady, setReady] = useState(false);
  const app = !isReady ? (
    <AppLoading />
  ) : (
    <Container>
      <Text>Open up App.js to start working on your app!</Text>
    </Container>
  );
  return app;
}

async function native_base() {
  await Font.loadAsync({
    Roboto: require("native-base/Fonts/Roboto.ttf"),
    Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
    ...Ionicons.font,
  });
}
useEffect(() => {
  native_base();
  setReady(true);
});

并得到错误，声明“钩子只能在函数组件的主体内使用”

Answer 1

您在函数外部使用了useEffect钩子，因此会出现该错误

export default function App() {
  [isReady, setReady] = useState(false);
  useEffect(() => {
  native_base();
  setReady(true);
   });
  const app = !isReady ? (
    <AppLoading />
  ) : (
    <Container>
      <Text>Open up App.js to start working on your app!</Text>
    </Container>
  );
  return app;
}

async function native_base() {
  await Font.loadAsync({
    Roboto: require("native-base/Fonts/Roboto.ttf"),
    Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
    ...Ionicons.font,
  });
}