React Native-使用钩子和render()

Question

我正在尝试在react原生应用程序中使用字体(谷歌字体(。我的钩子有问题：

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

我认为问题出在render((道具上。有人能告诉我应该在哪里添加上面的代码来获得这个惊喜吗？

我的代码是：

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

我得到的错误是：

Error: Invalid hook call.

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

Answer 1

不能在类组件内部使用钩子。React引入了钩子，用于功能组件。所以你有两个选择要么

• 在当前类组件OR中使用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)}
/>
);
}
}