在React Native中未打印狀態

我現在使用的是React Native。現在我試圖打印出一個已初始化的狀態（例如，此處的showText）。當我在渲染中記住這個值時，它不會顯示（空白）。我記得的方式是「{this.state.showText}」。它不會產生任何錯誤消息。在React Native中未打印狀態

也許因爲同樣的原因，TouchableHighlight的初始值似乎是空白的。由於Facebook Github中的示例應用程序在該網站中正常工作，因此我完全迷失在這裏。請給我任何關於這個問題的想法。

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Image, 
    ScrollView, 
    ListView, 
    TouchableHighlight, 
    TextInput 
} from 'react-native'; 


class Greeting extends Component { 
    render() { 
    return (
     <Text>Hello {this.props.name}! {this.props.date}~ Class can be added..{'\n'}</Text> 
    ); 
    } 
} 
class Test1 extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     showText: 'true', 
     showTextBool: true, 
     wow: 'ddsdfasdf' 
    }; 

    } 

    onSignupPress(){ 
    return "hello"; 
    } 

    render() { 

    let display = this.state.showTextBool ? 'true' : 'false'; 

    return (

     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Welcome to React Native! {this.state.showText} {this.state.showTextBool} 
      {this.state.wow} 
     </Text> 


     <TextInput style={styles.searchInput} value={this.state.wow} placeholder='Search via name or postcode'/> 


     <TouchableHighlight style={styles.button} underlayColor='#99d9f4'> 
      <Text style={styles.buttonText}>Go</Text> 
     </TouchableHighlight> 


     <Text style={styles.welcome}> 
      {display} + {this.onSignupPress()} + {this.state.showText} 
     </Text> 

     </View> 

    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 

    buttonText: { 
    color: 'white', 
    alignSelf: 'center' 
    }, 

    button: { 
    height: 36, 
    flex: 1, 
    flexDirection: 'row', 
    backgroundColor: '#48BBEC', 
    borderColor: '#48BBEC', 
    borderWidth: 1, 
    borderRadius: 8, 
    marginBottom: 10, 
    alignSelf: 'stretch', 
    justifyContent: 'center' 
    }, 

    searchInput: { 
    height: 36, 
    padding: 4, marginRight: 5, 
    flex: 4, 
    fontSize: 18, borderWidth: 1, borderColor: '#48BBEC', borderRadius: 8, color: '#48BBEC' 
    } 

}); 

AppRegistry.registerComponent('Test1',() => Test1);

來源

2016-07-29 Sungpah Lee

我試過你的代碼在反應原生快遞頁面。它呈現一個「真實」，但你期望兩個（文本和布爾）。在下面的部分：

Welcome to React Native! {this.state.showText} {this.state.showTextBool}

文本正在被正確地呈現（它確實說「真」），但布爾是不存在的，這主要是因爲你無法呈現這樣一個布爾值。請嘗試以下操作：

{String(this.state.showTextBool)}

這將正確呈現布爾值。

來源

2017-10-11 20:26:14 Moreno

在React Native中未打印狀態

回答

相關問題