javascript - 按下按钮不会加载 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。希望这对您有所帮助!