按下按鈕不會加載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

回答

相關問題