在React Native中，我沒有使用代碼進行渲染

Question

所以我非常困惑，因爲在下面的代碼中，按鈕應該呈現，但沒有任何效果。我得到的只是一個空白的白色屏幕。我沒有收到任何錯誤，終端說完成加載javaScript包，所以代碼正常工作。我不知道爲什麼會發生這種情況，我真的很想找一些幫助。

這是使用反應原生和JavaScript。

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 { 

    componentDidMount() { 
     Expo.Font.loadAsync({ 
     'Cabin-Regular-TTF': require('./Cabin-Regular-TTF.ttf'), 
     }); 


    } 
    constructor(props) { 
    super(props); 
    this.state = { postInput: ""} 
    } 

render() { 
    return (
     <View> 
     <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="#841584" 
      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> 

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

} // missing one! 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#e8e8e8', 
    alignItems: 'center', 
    justifyContent: 'center' 
    }, 
}); 

Answer 1

首先，我認爲你有一個造型問題。最外層的View至少應該有flex:1風格的道具。另外刪除justifyContent: 'center'和alignItems: 'center'可以提供幫助。

您的第二個問題是的onPress支柱造成的。您正在執行該功能，而不是將其作爲參數傳遞。

它應該如下所示;

onPress={() => this.setState({ fontLoaded: true })}