React Native在手机上显示黑屏

Question

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);

Answer 1

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.