在 Expo 中使用 React Hooks 在 React Native 功能组件中实现 Native 基础

Question

我正在尝试将 Expo 中的原生基础库与功能组件一起使用。但是，本机基础文档显示了如何在 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);
});

并收到错误提示“Hooks can only be used inside of the body of the function component”

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,
  });
}

在 Expo 中使用 React Hooks 在 React Native 功能组件中实现 Native 基础

Implementing Native base in React Native functional component with react hooks in Expo

reactjs

react-native

expo

native-base