使用React Native for Android创建字典应用

介绍

Facebook的React Native是一个强大的框架，可让您仅使用JavaScript和JSX轻松快速地构建Android和iOS应用程序。 使用React Native构建的应用程序使用本机用户界面组件，因此与直接使用Android和iOS的SDK构建的应用程序没有区别。

他们的表现也不算远远落后于原生应用的，因为几乎所有在的嵌入式实例背景JavaScript代码运行JavaScriptCore ，同一个JavaScript引擎，权力苹果公司的Safari浏览器。

在本教程中，我将通过向您展示如何构建一个简单的英语-德语词典应用程序，来帮助您开始使用Android的React Native。

先决条件

在开始之前，请确保计算机上已安装以下组件：

• 最新版本的Android SDK和Android支持库
• 最新版本的Node.js

从2015年9月开始，仅在OS X上支持React Native。但是，借助一些脚本 ，React Native v0.11.4在Ubuntu 14.04上可以正常工作。

1.安装React Native

React Native可作为Node.js包提供，并且可以使用Node Package Manager npm快速安装。

npm install -g react-native-cli

要使用React Native开发Android应用程序，应将名为ANDROID_HOME的环境变量的值设置为包含Android SDK的目录的绝对路径。 如果使用的是Bash shell，则可以使用export设置变量。

export ANDROID_HOME=/path/to/Android/Sdk

2.创建一个新项目

要创建一个React Native项目，您应该使用React Native的命令行界面或CLI，可以使用react-native命令来访问它。 我们将在本教程中创建一个字典应用程序，因此我们将项目称为Dictionary 。

react-native init Dictionary

命令完成后，您将拥有一个名为Dictionary的新目录，其中包含启动程序React Native应用程序。 使用cd输入新目录。

cd Dictionary

在继续之前，建议您运行入门应用程序以确保您的开发环境具有React Native所需的一切。 为此，请键入以下命令：

react-native run-android

现在，您将在模拟器上找到一个名为Dictionary的应用程序。 单击其图标以启动它。 如果一切顺利，您应该会看到类似以下的屏幕：

3.准备应用程序的入口点

默认情况下，React Native Android应用程序的入口点是一个名为index.android.jsJavaScript文件。 使用React Native的CLI创建项目时，将自动创建此文件。 但是，它包含属于入门应用程序的代码。 您可以为应用程序修改和使用该代码的一部分，也可以简单地删除所有代码并从头开始。 对于本教程，建议您执行后者。

删除index.android.js的内容后，请使用require加载名为react-native的模块。 该模块包含创建应用程序所需的所有React Native函数和对象。

var React = require('react-native');

4.创建一个React组件

React组件是JavaScript对象，负责呈现和自动更新React Native应用程序的用户界面。 实际上，React Native应用程序的几乎每个用户界面元素都是一个React组件。 这意味着，要创建应用程序的用户界面，您需要创建自己的自定义React组件。 为此，请使用React的createClass函数。 以下代码创建一个名为Dictionary的组件：

var Dictionary = React.createClass({

});

您可以将此组件视为应用程序的第一个屏幕。

第1步：定义布局

每当需要绘制或更新组件时，React Native都会自动调用render函数。 因此，必须将此功能添加到组件中。 在函数内部，您可以使用JSX定义组件的布局，JSX是JavaScript语法扩展，可让您轻松地将XML标签与JavaScript代码混合。

React Native提供了几个可用于组成布局的组件。 现在，我们将使用React.View作为容器，使用React.Text显示文本，以及使用React.TextInput接受用户输入。 将以下代码添加到组件：

render: function() {
    var layout =
        <React.View style = { styles.parent } >
   
   
    
    
                Type something in English:
            
   
   

            
   
   

            <React.Text style = { styles.germanLabel } >
                Its German equivalent is:
            </React.Text>

            <React.Text style = { styles.germanWord } >                
            </React.Text>
          
        </React.View>
    ;
	return layout;
},

如果您熟悉HTML，则可以将View视为HTML div ，将Text视为HTML span ，将TextInput视为HTML input元素。

步骤2：添加样式

在上面的代码片段中，几个组件都有一个style属性。 style属性与HTML class属性非常相似。 但是，它不是在样式表中引用CSS类，而是在React.StyleSheet实例中React.StyleSheet JSON对象。

要为您的应用程序创建React.StyleSheet对象，您需要使用React.StyleSheet.create函数。 作为唯一的参数，它期望一个包含各个组件样式的JSON对象。 这是我用于示例应用程序的样式：

var styles = React.StyleSheet.create({

	// For the container View
    parent: {
        padding: 16
    },

	// For the Text label
    germanLabel: {
        marginTop: 20,
        fontWeight: 'bold'
    },

	// For the Text meaning
    germanWord: {
        marginTop: 15,
        fontSize: 30,
        fontStyle: 'italic'
    }
});

步骤3：注册组件

为了让React Native知道它应该在您的应用程序启动时呈现您的组件，您必须使用React.AppRegistry.registerComponent函数进行注册。 为此，请在index.android.js的末尾添加以下代码：

React.AppRegistry.registerComponent('Dictionary', () => Dictionary);

如果您不熟悉ES6箭头功能，则可以简单地使用以下常规JavaScript代码代替：

React.AppRegistry.registerComponent('Dictionary', function() {
	return Dictionary;
});

如果需要，您现在可以重新加载您的应用以查看新的布局。 为此，请按模拟器的菜单按钮，然后单击Reload JS 。

4.控制组件的状态

所有组件都有一个称为state的特殊成员变量，它是一个JSON对象。 这很特别，因为一旦组件state改变，React Native就会自动重新渲染该组件以反映更改。 这是一项非常有用的功能，通过正确使用它，您可以避免手动获取或更新应用程序用户界面元素的内容。

让我们向Dictionary组件的state添加两个键， input和output 。 为此，您必须使用一个名为getInitialState的函数。 该函数的返回值成为组件的state 。

getInitialState: function() {
    return {
        input: '',
        output: ''
    };
},

现在，您可以将TextInput与input关联，最后一个Text组件与output关联。 这样做之后，您的布局应如下所示：

<React.View style = { styles.parent } >
   
   
    
    
        Type something in English:
    
   
   

    <React.TextInput text = { this.state.input } />

    <React.Text style = { styles.germanLabel } >
        Its German equivalent is:
    </React.Text>

    <React.Text style = { styles.germanWord } >
        { this.state.output }
    </React.Text>
  
</React.View>

您可能已经猜到了， input将包含用户输入的英语单词，而output将包含其德语对应内容。

尽管state更改会自动推送到用户界面，但事实并非如此。 这意味着，如果用户在TextInput输入内容，则组件的state不会改变。 要手动更新state ，应使用组件的setState方法。

要将TextInput的值发送到input ，可以将onChangeText侦听器添加到TextInput并在其中调用setState 。 使用ES6， TextInput标签将如下所示：

<React.TextInput text = { this.state.input }
	onChangeText={(e) => this.setState({input: e})}
/>

此时， input到应用程序的TextInput任何用户都可以立即使用。 剩下要做的就是将input映射到等效的德语并更新output 。 为此，您可以使用Winfried Honig的名为Honey。先生的初学者词典（德语-英语）的词典 。 从GitHub下载相当于字典的JSON，并将其添加到您的项目中。

要在index.android.js中加载字典，请使用require 。

var english_german = require('./english_german.json');

由于english_german只不过是一个全局JSON对象，其中英文单词是键，而它们的德语等效项是值，所以现在要做的就是检查input是否可用作键，如果是，请调用setState来分配关联的output值。 这样做的代码如下所示：

showMeaning: function() {
	// Use the ternary operator to check if the word 
	// exists in the dictionary.
	var meaning = this.state.input in english_german ? 
		            english_german[this.state.input] : 
		            "Not Found";

	// Update the state
	this.setState({
		 output: meaning 
	});
},

现在，您可以将showMeaning分配给TextInput的onSubmitEditing侦听器，以便仅在用户完成键入后才调用它。

<React.TextInput
    onChangeText={(e) => this.setState({input: e})}
    text = { this.state.input }
    onSubmitEditing = { this.showMeaning }
/>

您的字典应用已准备就绪。 您可以重新加载它并输入英语单词以立即查看其德语翻译。

结论

在本教程中，您学习了如何安装React Native并使用它来创建您的第一个Android应用，即仅使用JavaScript和JSX的英语-德语词典。 在此过程中，您学习了如何组成自定义组件，设置其样式以及如何使用其state来控制其显示的内容。

要了解有关React Native的更多信息，可以阅读其文档 。

翻译自: https://code.tutsplus.com/tutorials/creating-a-dictionary-app-using-react-native-for-android--cms-24969