Javascript 按下按钮不会'；t加载图形用户界面

问题： 因此，我正在使用自定义字体编写一个应用程序，并对其进行了编码，这样当您按下按钮时，字体将加载。当你按下“15秒后按我加载”的按钮时，会出现一个用户输入框，其中会显示一些空帖子、一些文本和另一个按钮（该按钮还没有做任何事情），但什么也没有显示。我没有发现任何错误。我想帮助弄清楚为什么什么都没有出现，以及我如何才能得到适当的东西来渲染

工作原理： 当您按下按钮“15秒后按我加载应用程序！”时，变量fontload应更改为true（我不知道它是否实际更改），然后这将导致代码呈现其他所有内容。没有任何东西可以渲染

我还试过什么： 我尝试过另一种方法，在加载字体的代码之后放置变量fontload，这样它是自动的，但也没有任何作用。我没有试过别的东西，因为我不知道还能试什么

代码：

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

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图、图像、文本输入、滚动视图、TouchableHighlight、按钮}；
从“expo”导入{Font}；
var fontLoaded=false；
导出默认类App扩展React.Component{
状态={
错误:，
};
componentDidMount（）{
Expo.Font.loadAsync({
“客舱常规TTF”：要求（“./客舱常规TTF.TTF”），
});
}
建造师（道具）{
超级（道具）；
this.state={postInput:}
}
render（）{
返回(
this.setState（{fontloadded:true}）
title=“15秒后按我加载应用程序！”
color=“#fe8200”
accessibilityLabel=“等待15秒，然后按我加载字体！”
/>
{fontload(
你在想什么？创建一个帖子！
样式={{高度：40，宽度：320，边框颜色：'#303030'，边框宽度：1}}
onChangeText={（postInput）=>this.setState（{postInput}）}
值={this.state.postInput}
)：（空）}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：'#e8e8e8'，
对齐项目：“居中”，
为内容辩护：“中心”
},
});

您应该将

this.state.fontload

放在渲染方法的返回中，您使用的是全局变量

fontload

，该变量没有更改。希望这有帮助

对不起，我不知道该把它放在哪里。你能给我举一个我必须修改的代码行的例子吗？谢谢大家!

{fontload？（

…随时将此变量

fontload

更改为

this.state.fontload

太棒了！！