Question

我正在尝试在React本机应用程序中使用一种字体（谷歌字体）。我在使用钩子时遇到问题：

object id = 0 / worker id = None
object id = 0 / worker id = 0        <<< obj.id resets here
object id = 1 / worker id = 1
object id = 2 / worker id = 2
object id = 3 / worker id = 3
object id = 4 / worker id = 4

我认为问题在于render（）属性。谁能建议我我应该在上面添加以上代码的方式来实现此功能？

我的代码是：

const [fontsLoaded ,setFontsLoaded] = useState(false);

我得到的错误是：

import React, { Component, useState } from 'react';
import * as Font from 'expo-font';
import { StyleSheet, Text, View } from 'react-native';
import { AppLoading } from 'expo';

 const getFonts = () => Font.loadAsync({
    'lobster': require('./assets/fonts/Lobster-Regular.ttf')
    });

export default class App extends Component {  
  render() {
    const [fontsLoaded ,setFontsLoaded] = useState(false);
    const gradientHeight=500;
    const gradientBackground  = '#12C1E5';
    const data = Array.from({ length: gradientHeight });

    if(fontsLoaded){
      return (
        <View style={styles.container}>    
          <View style={styles.centering}>
            <Text style={styles.titleText}>Test Title</Text>
          </View> 
          <View style={{flex:1}}>
            {data.map((_, i) => (
              <View
                key={i}
                style={{
                  position: 'absolute',
                  backgroundColor: gradientBackground,
                  height: 1,
                  bottom: (gradientHeight - i),
                  right: 0,
                  left: 0,
                  zIndex: 2,
                  opacity: (1 / gradientHeight) * (i + 2)
                }}
              >
              </View>
            ))}      
          </View>
        </View>
      );
    } else {
      return (
        <AppLoading
          startAsync={getFonts}
          onFinish={() => setFontsLoaded(true)}
        />
      );
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0e99b5',
    },
  centering: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleText: {
    color: 'orange',
    fontSize: 40,
  }
});

我只是想使用自定义字体，并在渲染到屏幕之前检查字体是否已加载。

Answer 1

您不能在类组件内部使用钩子。挂钩由React引入，用于功能组件中。所以你有两个选择

在当前课程组件中使用 setState 或
将您的类组件转换为功能组件。

我建议您使用功能组件，因为您没有使用任何类组件的生命周期。

如果您采用第一种方法，则可以如下更改代码：-

export default class App extends Component { 
  state = {
    fontsLoaded: false,
  };

  updateFontsLoadedState = () => {
    this.setState({ fontsLoaded: true });
  }


  render() {
    const { fontsLoaded } = this.state;
    const gradientHeight=500;
    const gradientBackground  = '#12C1E5';
    const data = Array.from({ length: gradientHeight });

    if(fontsLoaded){
      return (
        <View style={styles.container}>    
          <View style={styles.centering}>
            <Text style={styles.titleText}>Test Title</Text>
          </View> 
          <View style={{flex:1}}>
            {data.map((_, i) => (
              <View
                key={i}
                style={{
                  position: 'absolute',
                  backgroundColor: gradientBackground,
                  height: 1,
                  bottom: (gradientHeight - i),
                  right: 0,
                  left: 0,
                  zIndex: 2,
                  opacity: (1 / gradientHeight) * (i + 2)
                }}
              >
              </View>
            ))}      
          </View>
        </View>
      );
    } else {
      return (
        <AppLoading
          startAsync={getFonts}
          onFinish={this.updateFontsLoadedState}
        />
      );
    }
  }
}

如果您想使用更好的方法，请使用钩子并将其转换为功能组件，然后可以执行以下操作：-

export default function App(props) {
    const [fontsLoaded ,setFontsLoaded] = useState(false);
    const gradientHeight=500;
    const gradientBackground  = '#12C1E5';
    const data = Array.from({ length: gradientHeight });

    if(fontsLoaded){
      return (
        <View style={styles.container}>    
          <View style={styles.centering}>
            <Text style={styles.titleText}>Test Title</Text>
          </View> 
          <View style={{flex:1}}>
            {data.map((_, i) => (
              <View
                key={i}
                style={{
                  position: 'absolute',
                  backgroundColor: gradientBackground,
                  height: 1,
                  bottom: (gradientHeight - i),
                  right: 0,
                  left: 0,
                  zIndex: 2,
                  opacity: (1 / gradientHeight) * (i + 2)
                }}
              >
              </View>
            ))}      
          </View>
        </View>
      );
    } else {
      return (
        <AppLoading
          startAsync={getFonts}
          onFinish={() => setFontsLoaded(true)}
        />
      );
    }
}

React Native-使用带有render（）的钩子

1 个答案: