按下按钮不会加载gui

问题： 因此，我正在使用自定义字体编写应用程序，并且我编码了它，所以当您按下按钮时字体将加载。当您按下“按下15秒后加载！”按钮时一个用户输入框应该与一些空帖子，一些文本和另一个按钮一起出现（它什么都没有做），但没有任何显示。我没有得到任何错误。我想帮助弄清楚为什么什么都没有显示出来，以及我如何获得适当的东西来渲染。按下按钮不会加载gui

工作原理： 当您按下按钮“按下我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' 
    }, 
});

来源

2017-10-14 GIISE

你应该把this.state.fontLoaded在渲染方法的返回，您正在使用的全局变量fontLoaded这并没有改变。希望这可以帮助！

来源

2017-10-14 20:14:22

对不起，但我很困惑，把它放在哪里。你能给我一个我必须改变的代码行的例子吗？谢谢！ – GIISE

'{fontLoaded？（ <查看样式= {styles.container}>'.... 将此变量'fontLoaded'更改为'this.state.fontLoaded' –

太棒了，谢谢！ – GIISE

按下按钮不会加载gui

回答

相关问题