在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中未打印状态

回答

相关问题