1
Ich verwende jetzt React Native. Jetzt versuche ich einen der Zustände auszudrucken, die initialisiert werden (zum Beispiel showText hier). Wenn ich diesen Wert beim Rendern abrufe, wird er nicht angezeigt (leer). Die Art, wie ich mich erinnere, ist "{this.state.showText}". Es erzeugt keine Fehlermeldungen.Nicht gedruckt Zustand in React Native
Vielleicht aus dem gleichen Grund scheint der Anfangswert von TouchableHighlight leer zu sein. Ich bin hier völlig verloren, da eine Beispiel-App in Facebook Github innerhalb der Website funktioniert. Bitte geben Sie mir eine Idee zu diesem Thema.
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);