after searching for hours I am finally completly lost. I tried to build a simple Dictionary app following an outdated tutorial ( https://code.tutsplus.com/tutorials/creating-a-dictionary-app-using-react-native-for-android--cms-24969 ) for react native. The standard app after I run "react-native init" works fine on my phone. However my code just shows a blank screen without any errors. Below I posted the code, which I used to replace everthing in index.adroid.js. I would really appreciate it, if you could help me here. Thanks in advance!
import React, {Component} from 'react';
import {
AppRegistry,
Text,
View,
TextInput,
StyleSheet,
} from 'react-native';
var english_german = require('./english_german.json');
class Dictionary extends Component {
constructor(props) {
super(props);
this.state = {
input: '',
output: ''
};
}
render() {
return(
<View style={styles.parent}>
<Text>
Type something in English:
</Text>
<TextInput
// style= {{height: 40}}
// placeholder="Type here to translate!"
onChangeText={(text) => this._onTextInputChangeText(text)}
value={this.state.input}
onSubmitEditing={ this.showTranslation().bind(this)} />
<Text style = {styles.germanLabel}>
German translation:
</Text>
<Text style = {styles.germanWord}>
{this.state.output}
</Text>
</View>
);
}
_onTextInputChangeText(text) {
//alert(text);
this.setState({
input : text
})
}
showTranslation() {
var translation = this.state.input in english_german ? english_german[this.state.input] : "Not found";
this.setState({
output: translation
});
}
}
const styles = StyleSheet.create({
// For the container View
parent: {
padding: 16
},
// For the Text label
germanLabel: {
marginTop: 20,
fontWeight: 'bold'
},
// For the Text translation
germanWord: {
marginTop: 15,
fontSize: 30,
fontStyle: 'italic'
}
});
AppRegistry.registerComponent('Dictionary', () => Dictionary);
Thank you guys!
I didn't get the error most of the time, but the syntax error at onSubmitEditing
was the problem. For some reason it didn't work (show anything) when I uncommented the whole TextInput
. Anyway the fix of Michael Cheng to onSubmitEditing={ this.showTranslation.bind(this)}
worked.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.