在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 })}