按下按钮不会加载 gui

Question

问题：所以我正在使用自定义字体编程一个应用程序，我对它进行了编码，这样当你按下按钮时，字体就会加载。当你按下写着"15秒后按我加载！"的按钮时，会出现一个用户输入框，同时出现一些空帖子、一些文本和另一个按钮(还没有做任何事情)，但什么都不会显示。我没有任何错误。我想帮助弄清楚为什么什么都没有出现，以及我如何才能得到合适的东西来渲染。

它的工作原理：当你按下"15秒后按我加载应用程序！"按钮时，变量fontLoaded应该更改为true(我不知道它是否真的更改了)，然后这将导致代码呈现其他所有内容。没有任何渲染。

我还尝试过什么：我尝试过另一种方法，将变量fontLoaded放在加载字体的代码后面，这样它就自动了，而且也没有任何作用。我什么都没试过，因为我不知道还能试什么。

代码：

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button } from 'react-native';
import { Font } from 'expo';
var fontLoaded = false;
export default class App extends React.Component {
state = {
fontLoaded: false,
};
componentDidMount() {
Expo.Font.loadAsync({
'Cabin-Regular-TTF': require('./Cabin-Regular-TTF.ttf'),
});
}
constructor(props) {
super(props);
this.state = { postInput: ""}
}
render() {
return (
<View style={styles.container}>
<View style={styles.container}>
<View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} />
<Button
onPress={() => this.setState({ fontLoaded: true })}
title="Press Me To Load the App After 15 Seconds!"
color="#fe8200"
accessibilityLabel="Wait 15 seconds and then press me to load the font!"
/>
</View>

{fontLoaded ? (
<View style={styles.container}>
<Text style={{ fontFamily: 'Cabin-Regular-TTF', fontSize: 16 }}>
Whats on your mind? Create a post!
</Text>  
<TextInput>
style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postInput)=>this.setState({postInput})}
value={this.state.postInput}    
</TextInput>
<Button
title="+"
color="#fe8200"
accessibilityLabel="Wait 15 seconds and then press me to load the font!"
/>
<ScrollView>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</ScrollView>
</View>) : (null) }
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#e8e8e8',
alignItems: 'center',
justifyContent: 'center'
},
});

Answer 1

您应该将this.state.fontLoaded放在render方法的返回中，您使用的是没有更改的全局变量fontLoaded。希望这能有所帮助！