Question

搜索了几个小时后，我终于完全失败了。我尝试在一个过时的教程（https://code.tutsplus.com/tutorials/creating-a-dictionary-app-using-react-native-for-android--cms-24969）之后构建一个简单的Dictionary应用程序，用于本机反应。运行“react-native init”后的标准应用在我的手机上运行正常。但是，我的代码只显示一个空白屏幕，没有任何错误。下面我发布了代码，我用它来替换index.adroid.js中的everthing。如果你能在这里帮助我，我将非常感激。提前谢谢！

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

谢谢你们！

我大部分时间都没有收到错误，但onSubmitEditing的语法错误是问题所在。出于某种原因，当我取消注释整个TextInput时，它没有工作（显示任何内容）。无论如何，Michael Cheng对onSubmitEditing={ this.showTranslation.bind(this)}的修复工作。

React Native在手机上显示空白屏幕

1 个答案: