javascript - 在 React Native 中，我的代码没有呈现任何内容

Question

所以我很困惑，因为在下面的代码中，应该呈现一个按钮，但什么也没有呈现。我得到的只是一个空白的白屏。我没有收到任何错误，并且终端显示已完成加载 javaScript 包，因此代码可以正常工作。我不知道为什么会发生这种情况，我真的需要一些帮助。

这是使用 React Native 和 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 样式 prop。另外删除 justifyContent: 'center' 和 alignItems: 'center' 也会有所帮助。

您的第二个问题是由 Button 的 onPress 属性引起的。您正在执行该函数，而不是将其作为参数传递。

应该像下面这样；

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