- React Native 教程
- React Native - 首页
- 核心概念
- React Native - 概述
- React Native - 环境搭建
- React Native - 应用
- React Native - 状态
- React Native - 属性
- React Native - 样式
- React Native - Flexbox
- React Native - ListView
- React Native - 文本输入
- React Native - ScrollView
- React Native - 图片
- React Native - HTTP
- React Native - 按钮
- React Native - 动画
- React Native - 调试
- React Native - 路由
- React Native - 运行 IOS
- React Native - 运行 Android
- 组件和 API
- React Native - View
- React Native - WebView
- React Native - Modal
- React Native - ActivityIndicator
- React Native - Picker
- React Native - 状态栏
- React Native - Switch
- React Native - Text
- React Native - Alert
- React Native - 地理位置
- React Native - AsyncStorage
- React Native 有用资源
- React Native 快速指南
- React Native - 有用资源
- React Native - 讨论
React Native 快速指南
React Native - 概述
为了更好地理解 React Native 的概念,我们将借用官方文档中的一些内容 -
React Native 允许您仅使用 JavaScript 构建移动应用程序。它使用与 React 相同的设计,让您能够从声明式组件中构建丰富的移动 UI。使用 React Native,您不会构建移动 Web 应用、HTML5 应用或混合应用;您构建的是真正的移动应用,与使用 Objective-C 或 Java 构建的应用无法区分。React Native 使用与常规 iOS 和 Android 应用相同的 UI 基本构建块。您只需使用 JavaScript 和 React 将这些构建块组合在一起。
React Native 特性
以下是 React Native 的特性 -
React - 这是一个使用 JavaScript 构建 Web 和移动应用程序的框架。
Native - 您可以使用由 JavaScript 控制的原生组件。
平台 - React Native 支持 IOS 和 Android 平台。
React Native 优势
以下是 React Native 的优势 -
JavaScript - 您可以使用现有的 JavaScript 知识构建原生移动应用程序。
代码共享 - 您可以在不同的平台上共享大部分代码。
社区 - React 和 React Native 周围的社区非常庞大,您将能够找到所需的任何答案。
React Native 限制
以下是 React Native 的限制 -
原生组件 - 如果您想创建尚未创建的原生功能,则需要编写一些平台特定的代码。
React Native - 环境搭建
要设置 React Native 的环境,您需要安装几个东西。我们将使用 OSX 作为我们的构建平台。
序号 | 软件 | 描述 |
---|---|---|
1 | NodeJS 和 NPM | 您可以按照我们的 NodeJS 环境搭建 教程来安装 NodeJS。 |
步骤 1:安装 create-react-native-app
在您的系统中成功安装 NodeJS 和 NPM 后,您可以继续安装 create-react-native-app(全局安装,如下所示)。
C:\Users\Tutorialspoint> npm install -g create-react-native-app
步骤 2:创建项目
浏览所需的文件夹并创建一个新的 React Native 项目,如下所示。
C:\Users\Tutorialspoint>cd Desktop C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative
执行上述命令后,将创建一个具有指定名称的文件夹,其中包含以下内容。
步骤 3:NodeJS Python Jdk8
确保您的系统中已安装 Python NodeJS 和 jdk8,如果未安装,请安装它们。除了这些之外,建议安装最新版本的 yarn 以避免某些问题。
步骤 4:安装 React Native CLI
您可以使用 install -g react-native-cli 命令在 npm 上安装 React Native 命令行界面,如下所示。
npm install -g react-native-cli
步骤 5:启动 React Native
要验证安装,请浏览项目文件夹并尝试使用 start 命令启动项目。
C:\Users\Tutorialspoint\Desktop>cd MyReactNative C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start
如果一切顺利,您将获得如下所示的二维码。
按照说明,在您的 Android 设备上运行 React Native 应用的一种方法是使用 Expo。在您的 Android 设备上安装 Expo 客户端并扫描上面获得的二维码。
步骤 6:弹出项目
如果您想使用 Android Studio 运行 Android 模拟器,请按 ctrl+c 退出当前命令行。
然后,执行运行 弹出命令 如下
npm run eject
这会提示您弹出选项,使用箭头选择第一个选项并按 Enter。
然后,您应该建议在主屏幕上显示应用名称以及 Android Studio 和 Xcode 项目的项目名称。
尽管您的项目已成功弹出,但您可能会收到以下错误 -
忽略此错误并使用以下命令为 Android 运行 React Native -
react-native run-android
但是,在此之前,您需要安装 Android Studio。
步骤 7:安装 Android Studio
访问网页 https://developer.android.com.cn/studio/ 并下载 Android Studio。
下载其安装文件后,双击它并继续安装。
步骤 8:配置 AVD 管理器
要配置 AVD 管理器,请点击菜单栏中的相应图标。
步骤 9:配置 AVD 管理器
选择设备定义,建议使用 Nexus 5X。
点击下一步按钮,您将看到一个系统映像窗口。选择x86 映像选项卡。
然后,选择棉花糖并点击下一步。
最后,点击完成按钮以完成 AVD 配置。
配置虚拟设备后,点击操作列下的播放按钮以启动您的 Android 模拟器。
步骤 10:运行 Android
打开命令提示符,浏览您的项目文件夹,然后执行react-native run-android命令。
然后,您的应用执行将在另一个提示符中开始,您可以看到其状态。
在您的 Android 模拟器中,您可以看到默认应用的执行情况,如下所示 -
步骤 11:local.properties
在您的项目文件夹SampleReactNative/android(在本例中)中打开android文件夹。创建一个名为local.properties的文件,并在其中添加以下路径。
sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk
这里,用您的用户名替换Tutorialspoint。
步骤 12:热重载
要构建应用程序,请修改 App.js,更改将自动更新到 Android 模拟器上。
如果没有,请点击 Android 模拟器,按ctrl+m,然后选择启用热重载选项。
React Native - 应用
如果您打开默认应用程序,您可以观察到 app.js 文件如下所示
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends React.Component { render() { return ( <View style = {styles.container}> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu.</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
输出
Hello world
要显示一条简单的消息“欢迎来到 Tutorialspoint”,请删除 CSS 部分并将要打印的消息包装在<text></text>标签内,并放置在<view></view>中,如下所示。
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends React.Component { render() { return ( <View> <Text>Welcome to Tutorialspoint</Text> </View> ); } }
React Native - 状态
React 组件内部的数据由状态和属性管理。在本章中,我们将讨论状态。
状态和属性的区别
状态是可变的,而属性是不可变的。这意味着状态将来可以更新,而属性不能更新。
使用状态
这是我们的根组件。我们只是导入了Home,它将在大多数章节中使用。
App.js
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends React.Component { state = { myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' } render() { return ( <View> <Text> {this.state.myState} </Text> </View> ); } }
我们可以在模拟器中看到来自状态的文本,如以下屏幕截图所示。
更新状态
由于状态是可变的,我们可以通过创建deleteState函数并使用onPress = {this.deleteText}事件调用它来更新它。
Home.js
import React, { Component } from 'react' import { Text, View } from 'react-native' class Home extends Component { state = { myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' } updateState = () ⇒ this.setState({ myState: 'The state is updated' }) render() { return ( <View> <Text onPress = {this.updateState}> {this.state.myState} </Text> </View> ); } } export default Home;
注意 - 在所有章节中,我们将对有状态(容器)组件使用类语法,对无状态(展示)组件使用函数语法。我们将在下一章中学习更多关于组件的信息。
我们还将学习如何对updateState使用箭头函数语法。您应该记住,此语法使用词法作用域,并且this关键字将绑定到环境对象(类)。这有时会导致意外行为。
定义方法的另一种方法是使用 EC5 函数,但在这种情况下,我们需要在构造函数中手动绑定this。请考虑以下示例以了解这一点。
class Home extends Component { constructor() { super() this.updateState = this.updateState.bind(this) } updateState() { // } render() { // } }
React Native - 属性
在上一章中,我们向您展示了如何使用可变状态。在本章中,我们将向您展示如何组合状态和属性。
展示组件应通过传递属性获取所有数据。只有容器组件应该具有状态。
容器组件
我们现在将了解什么是容器组件以及它是如何工作的。
理论
现在我们将更新我们的容器组件。此组件将处理状态并将属性传递给展示组件。
容器组件仅用于处理状态。所有与视图(样式等)相关的功能都将在展示组件中处理。
示例
如果我们想使用上一章中的示例,我们需要从 render 函数中删除Text元素,因为此元素用于向用户呈现文本。这应该在展示组件内部。
让我们回顾一下下面示例中的代码。我们将导入PresentationalComponent并将其传递给 render 函数。
在导入PresentationalComponent并将其传递给 render 函数后,我们需要传递属性。我们将通过将myText = {this.state.myText}和deleteText = {this.deleteText}添加到<PresentationalComponent>来传递属性。现在,我们可以在展示组件内部访问它。
App.js
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import PresentationalComponent from './PresentationalComponent' export default class App extends React.Component { state = { myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' } updateState = () => { this.setState({ myState: 'The state is updated' }) } render() { return ( <View> <PresentationalComponent myState = {this.state.myState} updateState = {this.updateState}/> </View> ); } }
展示组件
我们现在将了解什么是展示组件以及它是如何工作的。
理论
展示组件应该只用于向用户呈现视图。这些组件没有状态。它们将所有数据和函数作为属性接收。
最佳实践是尽可能多地使用展示组件。
示例
正如我们在上一章中提到的,我们对展示组件使用 EC6 函数语法。
我们的组件将接收属性、返回视图元素、使用{props.myText}呈现文本,并在用户点击文本时调用{props.deleteText}函数。
PresentationalComponent.js
import React, { Component } from 'react' import { Text, View } from 'react-native' const PresentationalComponent = (props) => { return ( <View> <Text onPress = {props.updateState}> {props.myState} </Text> </View> ) } export default PresentationalComponent
现在,我们具有与状态章节中相同的的功能。唯一的区别是我们重构了代码到容器和展示组件。
您可以运行应用程序并查看以下屏幕截图中的文本。
如果您点击文本,它将从屏幕上移除。
React Native - 样式
有几种方法可以在 React Native 中设置元素的样式。
您可以使用style属性内联添加样式。但是,这不是最佳实践,因为代码可能难以阅读。
在本章中,我们将使用StyleSheet进行样式设置。
容器组件
在本节中,我们将简化上一章中的容器组件。
App.js
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import PresentationalComponent from './PresentationalComponent' export default class App extends React.Component { state = { myState: 'This is my state' } render() { return ( <View> <PresentationalComponent myState = {this.state.myState}/> </View> ); } }
展示组件
在以下示例中,我们将导入StyleSheet。在文件底部,我们将创建样式表并将其分配给styles常量。请注意,我们的样式采用驼峰命名法,并且我们不使用px或%进行样式设置。
要将样式应用于我们的文本,我们需要将style = {styles.myText}属性添加到Text元素。
PresentationalComponent.js
import React, { Component } from 'react' import { Text, View, StyleSheet } from 'react-native' const PresentationalComponent = (props) => { return ( <View> <Text style = {styles.myState}> {props.myState} </Text> </View> ) } export default PresentationalComponent const styles = StyleSheet.create ({ myState: { marginTop: 20, textAlign: 'center', color: 'blue', fontWeight: 'bold', fontSize: 20 } })
当我们运行应用程序时,我们将收到以下输出。
React Native - Flexbox
为了适应不同的屏幕尺寸,React Native 提供了Flexbox支持。
我们将使用React Native - 样式章节中使用的相同代码。我们只会更改PresentationalComponent。
布局
为了实现所需的布局,flexbox 提供了三个主要属性 - flexDirection justifyContent和alignItems。
下表显示了所有可能的选项。
属性 | 值 | 描述 |
---|---|---|
flexDirection | 'column', 'row' | 用于指定元素是垂直排列还是水平排列。 |
justifyContent | 'center', 'flex-start', 'flex-end', 'space-around', 'space-between' | 用于确定元素在容器内如何分布。 |
alignItems | 'center', 'flex-start', 'flex-end', 'stretched' | 用于确定元素在容器内沿次要轴(与flexDirection相反)如何分布。 |
如果您想垂直对齐项目并将其居中,则可以使用以下代码。
App.js
import React, { Component } from 'react' import { View, StyleSheet } from 'react-native' const Home = (props) => { return ( <View style = {styles.container}> <View style = {styles.redbox} /> <View style = {styles.bluebox} /> <View style = {styles.blackbox} /> </View> ) } export default Home const styles = StyleSheet.create ({ container: { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: 'grey', height: 600 }, redbox: { width: 100, height: 100, backgroundColor: 'red' }, bluebox: { width: 100, height: 100, backgroundColor: 'blue' }, blackbox: { width: 100, height: 100, backgroundColor: 'black' }, })
输出
如果需要将项目移动到右侧并在它们之间添加空格,则可以使用以下代码。
App.js
import React, { Component } from 'react' import { View, StyleSheet } from 'react-native' const App = (props) => { return ( <View style = {styles.container}> <View style = {styles.redbox} /> <View style = {styles.bluebox} /> <View style = {styles.blackbox} /> </View> ) } export default App const styles = StyleSheet.create ({ container: { flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-end', backgroundColor: 'grey', height: 600 }, redbox: { width: 100, height: 100, backgroundColor: 'red' }, bluebox: { width: 100, height: 100, backgroundColor: 'blue' }, blackbox: { width: 100, height: 100, backgroundColor: 'black' }, })
React Native - ListView
在本章中,我们将向您展示如何在 React Native 中创建列表。我们将 List 导入到我们的 Home 组件中并在屏幕上显示它。
App.js
import React from 'react' import List from './List.js' const App = () => { return ( <List /> ) } export default App
要创建列表,我们将使用 map() 方法。这将遍历项目数组,并渲染每个项目。
List.js
import React, { Component } from 'react' import { Text, View, TouchableOpacity, StyleSheet } from 'react-native' class List extends Component { state = { names: [ { id: 0, name: 'Ben', }, { id: 1, name: 'Susan', }, { id: 2, name: 'Robert', }, { id: 3, name: 'Mary', } ] } alertItemName = (item) => { alert(item.name) } render() { return ( <View> { this.state.names.map((item, index) => ( <TouchableOpacity key = {item.id} style = {styles.container} onPress = {() => this.alertItemName(item)}> <Text style = {styles.text}> {item.name} </Text> </TouchableOpacity> )) } </View> ) } } export default List const styles = StyleSheet.create ({ container: { padding: 10, marginTop: 3, backgroundColor: '#d9f9b1', alignItems: 'center', }, text: { color: '#4f603c' } })
当我们运行应用程序时,我们将看到名称列表。
您可以点击列表中的每个项目以触发显示名称的警报。
React Native - 文本输入
在本章中,我们将向您展示如何在 React Native 中使用 TextInput 元素。
Home 组件将导入并渲染输入。
App.js
import React from 'react'; import Inputs from './inputs.js' const App = () => { return ( <Inputs /> ) } export default App
输入
我们将定义初始状态。
定义初始状态后,我们将创建 handleEmail 和 handlePassword 函数。这些函数用于更新状态。
login() 函数只会警示当前状态的值。
我们还将向文本输入添加其他一些属性,以禁用自动大写,删除 Android 设备上的底部边框并设置占位符。
inputs.js
import React, { Component } from 'react' import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native' class Inputs extends Component { state = { email: '', password: '' } handleEmail = (text) => { this.setState({ email: text }) } handlePassword = (text) => { this.setState({ password: text }) } login = (email, pass) => { alert('email: ' + email + ' password: ' + pass) } render() { return ( <View style = {styles.container}> <TextInput style = {styles.input} underlineColorAndroid = "transparent" placeholder = "Email" placeholderTextColor = "#9a73ef" autoCapitalize = "none" onChangeText = {this.handleEmail}/> <TextInput style = {styles.input} underlineColorAndroid = "transparent" placeholder = "Password" placeholderTextColor = "#9a73ef" autoCapitalize = "none" onChangeText = {this.handlePassword}/> <TouchableOpacity style = {styles.submitButton} onPress = { () => this.login(this.state.email, this.state.password) }> <Text style = {styles.submitButtonText}> Submit </Text> </TouchableOpacity> </View> ) } } export default Inputs const styles = StyleSheet.create({ container: { paddingTop: 23 }, input: { margin: 15, height: 40, borderColor: '#7a42f4', borderWidth: 1 }, submitButton: { backgroundColor: '#7a42f4', padding: 10, margin: 15, height: 40, }, submitButtonText:{ color: 'white' } })
每当我们在其中一个输入字段中键入内容时,状态都会更新。当我们点击 Submit 按钮时,输入文本将显示在对话框中。
每当我们在其中一个输入字段中键入内容时,状态都会更新。当我们点击 Submit 按钮时,输入文本将显示在对话框中。
React Native - ScrollView
在本章中,我们将向您展示如何使用 ScrollView 元素。
我们将再次创建 ScrollViewExample.js 并将其导入 Home。
App.js
import React from 'react'; import ScrollViewExample from './scroll_view.js'; const App = () => { return ( <ScrollViewExample /> ) }export default App
Scrollview 将渲染名称列表。我们将在状态中创建它。
ScrollView.js
import React, { Component } from 'react'; import { Text, Image, View, StyleSheet, ScrollView } from 'react-native'; class ScrollViewExample extends Component { state = { names: [ {'name': 'Ben', 'id': 1}, {'name': 'Susan', 'id': 2}, {'name': 'Robert', 'id': 3}, {'name': 'Mary', 'id': 4}, {'name': 'Daniel', 'id': 5}, {'name': 'Laura', 'id': 6}, {'name': 'John', 'id': 7}, {'name': 'Debra', 'id': 8}, {'name': 'Aron', 'id': 9}, {'name': 'Ann', 'id': 10}, {'name': 'Steve', 'id': 11}, {'name': 'Olivia', 'id': 12} ] } render() { return ( <View> <ScrollView> { this.state.names.map((item, index) => ( <View key = {item.id} style = {styles.item}> <Text>{item.name}</Text> </View> )) } </ScrollView> </View> ) } } export default ScrollViewExample const styles = StyleSheet.create ({ item: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 30, margin: 2, borderColor: '#2a4944', borderWidth: 1, backgroundColor: '#d2f7f1' } })
当我们运行应用程序时,我们将看到可滚动的名称列表。
React Native - 图片
在本章中,我们将了解如何在 React Native 中使用图像。
添加图像
让我们在 src 文件夹内创建一个名为 img 的新文件夹。我们将在该文件夹内添加我们的图像(myImage.png)。
我们将在主屏幕上显示图像。
App.js
import React from 'react'; import ImagesExample from './ImagesExample.js' const App = () => { return ( <ImagesExample /> ) } export default App
可以使用以下语法访问本地图像。
image_example.js
import React, { Component } from 'react' import { Image } from 'react-native' const ImagesExample = () => ( <Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} /> ) export default ImagesExample
输出
屏幕密度
React Native 提供了一种使用 @2x, @3x 后缀为不同设备优化图像的方法。应用程序只会加载特定屏幕密度所需的图像。
以下是 img 文件夹内图像的名称。
[email protected] [email protected]
网络图像
使用网络图像时,我们需要 source 属性而不是 require。建议为网络图像定义 width 和 height。
App.js
import React from 'react'; import ImagesExample from './image_example.js' const App = () => { return ( <ImagesExample /> ) } export default App
image_example.js
import React, { Component } from 'react' import { View, Image } from 'react-native' const ImagesExample = () => ( <Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}} style = {{ width: 200, height: 200 }} /> ) export default ImagesExample
输出
React Native - HTTP
在本章中,我们将向您展示如何使用 fetch 处理网络请求。
App.js
import React from 'react'; import HttpExample from './http_example.js' const App = () => { return ( <HttpExample /> ) } export default App
使用 Fetch
我们将使用 componentDidMount 生命周期方法在组件挂载后立即从服务器加载数据。此函数将向服务器发送 GET 请求,返回 JSON 数据,将输出记录到控制台并更新我们的状态。
http_example.js
import React, { Component } from 'react' import { View, Text } from 'react-native' class HttpExample extends Component { state = { data: '' } componentDidMount = () => { fetch('https://jsonplaceholder.typicode.com/posts/1', { method: 'GET' }) .then((response) => response.json()) .then((responseJson) => { console.log(responseJson); this.setState({ data: responseJson }) }) .catch((error) => { console.error(error); }); } render() { return ( <View> <Text> {this.state.data.body} </Text> </View> ) } } export default HttpExample
输出
React Native - 按钮
在本章中,我们将向您展示 React Native 中的可触摸组件。我们称它们为“可触摸的”,因为它们提供了内置动画,并且我们可以使用 onPress 属性来处理触摸事件。
Facebook 提供了 Button 组件,它可以用作通用按钮。请考虑以下示例以了解相同内容。
App.js
import React, { Component } from 'react' import { Button } from 'react-native' const App = () => { const handlePress = () => false return ( <Button onPress = {handlePress} title = "Red button!" color = "red" /> ) } export default App
如果默认的 Button 组件不满足您的需求,则可以使用以下组件之一代替。
Touchable Opacity
此元素将在触摸时更改元素的不透明度。
App.js
import React from 'react' import { TouchableOpacity, StyleSheet, View, Text } from 'react-native' const App = () => { return ( <View style = {styles.container}> <TouchableOpacity> <Text style = {styles.text}> Button </Text> </TouchableOpacity> </View> ) } export default App const styles = StyleSheet.create ({ container: { alignItems: 'center', }, text: { borderWidth: 1, padding: 25, borderColor: 'black', backgroundColor: 'red' } })
Touchable Highlight
当用户按下元素时,它会变暗,并且底层颜色将透出来。
App.js
import React from 'react' import { View, TouchableHighlight, Text, StyleSheet } from 'react-native' const App = (props) => { return ( <View style = {styles.container}> <TouchableHighlight> <Text style = {styles.text}> Button </Text> </TouchableHighlight> </View> ) } export default App const styles = StyleSheet.create ({ container: { alignItems: 'center', }, text: { borderWidth: 1, padding: 25, borderColor: 'black', backgroundColor: 'red' } })
Touchable Native Feedback
这将在按下元素时模拟墨水动画。
App.js
import React from 'react' import { View, TouchableNativeFeedback, Text, StyleSheet } from 'react-native' const Home = (props) => { return ( <View style = {styles.container}> <TouchableNativeFeedback> <Text style = {styles.text}> Button </Text> </TouchableNativeFeedback> </View> ) } export default Home const styles = StyleSheet.create ({ container: { alignItems: 'center', }, text: { borderWidth: 1, padding: 25, borderColor: 'black', backgroundColor: 'red' } })
Touchable Without Feedback
当您想要处理触摸事件而没有任何动画时,应该使用此方法。通常,此组件的使用频率不高。
<TouchableWithoutFeedback> <Text> Button </Text> </TouchableWithoutFeedback>
React Native - 动画
在本章中,我们将向您展示如何在 React Native 中使用 LayoutAnimation。
动画组件
我们将 myStyle 设置为状态的属性。此属性用于设置 PresentationalAnimationComponent 内元素的样式。
我们还将创建两个函数 - expandElement 和 collapseElement。这些函数将更新状态中的值。第一个将使用 spring 预设动画,而第二个将具有 linear 预设。我们也将它们作为道具传递。Expand 和 Collapse 按钮分别调用 expandElement() 和 collapseElement() 函数。
在此示例中,我们将动态更改框的宽度和高度。由于 Home 组件将保持不变,因此我们只会更改 Animations 组件。
App.js
import React, { Component } from 'react' import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native' class Animations extends Component { componentWillMount = () => { this.animatedWidth = new Animated.Value(50) this.animatedHeight = new Animated.Value(100) } animatedBox = () => { Animated.timing(this.animatedWidth, { toValue: 200, duration: 1000 }).start() Animated.timing(this.animatedHeight, { toValue: 500, duration: 500 }).start() } render() { const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight } return ( <TouchableOpacity style = {styles.container} onPress = {this.animatedBox}> <Animated.View style = {[styles.box, animatedStyle]}/> </TouchableOpacity> ) } } export default Animations const styles = StyleSheet.create({ container: { justifyContent: 'center', alignItems: 'center' }, box: { backgroundColor: 'blue', width: 50, height: 100 } })
React Native - 调试
React Native 提供了一些有助于调试代码的方法。
在应用程序开发者菜单中
您可以通过按 command + D 在 IOS 模拟器上打开开发者菜单。
在 Android 模拟器上,您需要按 command + M。
Reload - 用于重新加载模拟器。您可以使用快捷键 command + R
Debug JS Remotely - 用于在浏览器开发者控制台中激活调试。
Enable Live Reload - 用于在保存代码时启用实时重新加载。调试器将在 localhost:8081/debugger-ui 打开。
Start Systrace - 用于启动基于 Android 标记的性能分析工具。
Show Inspector - 用于打开检查器,您可以在其中找到有关组件的信息。您可以使用快捷键 command + I
Show Perf Monitor - Perf monitor 用于跟踪应用程序的性能。
React Native - 路由
在本章中,我们将了解 React Native 中的导航。
步骤 1:安装 Router
首先,我们需要安装 Router。我们将在本章中使用 React Native Router Flux。您可以从项目文件夹中的终端运行以下命令。
npm i react-native-router-flux --save
步骤 2:整个应用程序
由于我们希望我们的路由器处理整个应用程序,因此我们将在 index.ios.js 中添加它。对于 Android,您可以在 index.android.js 中执行相同的操作。
App.js
import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; import Routes from './Routes.js' class reactTutorialApp extends Component { render() { return ( <Routes /> ) } } export default reactTutorialApp AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp)
步骤 3:添加 Router
现在,我们将在 components 文件夹内创建 Routes 组件。它将返回带有多个场景的 Router。每个场景都需要 key, component 和 title。Router 使用 key 属性在场景之间切换,component 将在屏幕上渲染,title 将显示在导航栏中。我们还可以将 initial 属性设置为要最初渲染的场景。
Routes.js
import React from 'react' import { Router, Scene } from 'react-native-router-flux' import Home from './Home.js' import About from './About.js' const Routes = () => ( <Router> <Scene key = "root"> <Scene key = "home" component = {Home} title = "Home" initial = {true} /> <Scene key = "about" component = {About} title = "About" /> </Scene> </Router> ) export default Routes
步骤 4:创建组件
我们已经从前面的章节中获得了 Home 组件;现在,我们需要添加 About 组件。我们将添加 goToAbout 和 goToHome 函数以在场景之间切换。
Home.js
import React from 'react' import { TouchableOpacity, Text } from 'react-native'; import { Actions } from 'react-native-router-flux'; const Home = () => { const goToAbout = () => { Actions.about() } return ( <TouchableOpacity style = {{ margin: 128 }} onPress = {goToAbout}> <Text>This is HOME!</Text> </TouchableOpacity> ) } export default Home
About.js
import React from 'react' import { TouchableOpacity, Text } from 'react-native' import { Actions } from 'react-native-router-flux' const About = () => { const goToHome = () => { Actions.home() } return ( <TouchableOpacity style = {{ margin: 128 }} onPress = {goToHome}> <Text>This is ABOUT</Text> </TouchableOpacity> ) } export default About
应用程序将渲染初始 Home 屏幕。
您可以按按钮切换到关于屏幕。后退箭头将出现;您可以使用它返回到上一屏幕。
React Native - 运行 IOS
如果您想在 IOS 模拟器中测试您的应用程序,您只需在终端中打开应用程序的根文件夹并运行 -
react-native run-ios
上述命令将启动模拟器并运行应用程序。
我们还可以指定要使用的设备。
react-native run-ios --simulator "iPhone 5s
在模拟器中打开应用程序后,您可以按 IOS 上的 command + D 打开开发者菜单。您可以在我们的 调试章节中查看更多相关信息。
您还可以通过按 command + R 重新加载 IOS 模拟器。
React Native - 运行 Android
我们可以通过在终端中运行以下代码在 Android 平台上运行 React Native 应用程序。
react-native run-android
在 Android 设备上运行应用程序之前,您需要在 开发者选项 中启用 USB 调试。
启用 USB 调试 后,您可以插入您的设备并运行上面给出的代码片段。
原生 Android 模拟器速度很慢。我们建议下载 Genymotion 来测试您的应用程序。
可以通过按 command + M 访问开发者菜单。
React Native - View
View 是 React Native 中最常见的元素。您可以将其视为 Web 开发中使用的 div 元素的等效项。
用例
现在让我们看看一些常见的用例。
当您需要将元素包装在容器内时,可以使用 View 作为容器元素。
当您想要在父元素内嵌套更多元素时,父元素和子元素都可以是 View。它可以拥有任意数量的子元素。
当您想要设置不同元素的样式时,您可以将它们放在 View 内,因为它支持 style 属性、flexbox 等。
View 还支持合成触摸事件,这对于不同的目的很有用。
我们已经在前面的章节中使用了 View,并且几乎在所有后续章节中也将使用它。View 可以被认为是 React Native 中的默认元素。在下面给出的示例中,我们将嵌套两个 View 和一个文本。
App.js
import React, { Component } from 'react' import { View, Text } from 'react-native' const App = () => { return ( <View> <View> <Text>This is my text</Text> </View> </View> ) } export default App
输出
React Native - WebView
在本章中,我们将学习如何使用 WebView。当您想将网页内联渲染到您的移动应用程序时,可以使用它。
使用 WebView
HomeContainer 将是一个容器组件。
App.js
import React, { Component } from 'react' import WebViewExample from './web_view_example.js' const App = () => { return ( <WebViewExample/> ) } export default App;
让我们在 src/components/home 文件夹内创建一个名为 WebViewExample.js 的新文件。
web_view_example.js
import React, { Component } from 'react' import { View, WebView, StyleSheet } from 'react-native' const WebViewExample = () => { return ( <View style = {styles.container}> <WebView source = {{ uri: 'https://www.google.com/?gws_rd=cr,ssl&ei=SICcV9_EFqqk6ASA3ZaABA#q=tutorialspoint' }} /> </View> ) } export default WebViewExample; const styles = StyleSheet.create({ container: { height: 350, } })
上面的程序将生成以下输出。
React Native - Modal
在本章中,我们将向您展示如何在 React Native 中使用模态组件。
现在让我们创建一个新文件:ModalExample.js
我们将把逻辑放在 ModalExample 中。我们可以通过运行 toggleModal 来更新初始状态。
通过运行 toggleModal 更新初始状态后,我们将 visible 属性设置为我们的模态。此属性将在状态更改时更新。
onRequestClose 是 Android 设备所必需的。
App.js
import React, { Component } from 'react' import WebViewExample from './modal_example.js' const Home = () => { return ( <WebViewExample/> ) } export default Home;
modal_example.js
import React, { Component } from 'react'; import { Modal, Text, TouchableHighlight, View, StyleSheet} from 'react-native' class ModalExample extends Component { state = { modalVisible: false, } toggleModal(visible) { this.setState({ modalVisible: visible }); } render() { return ( <View style = {styles.container}> <Modal animationType = {"slide"} transparent = {false} visible = {this.state.modalVisible} onRequestClose = {() => { console.log("Modal has been closed.") } }> <View style = {styles.modal}> <Text style = {styles.text}>Modal is open!</Text> <TouchableHighlight onPress = {() => { this.toggleModal(!this.state.modalVisible)}}> <Text style = {styles.text}>Close Modal</Text> </TouchableHighlight> </View> </Modal> <TouchableHighlight onPress = {() => {this.toggleModal(true)}}> <Text style = {styles.text}>Open Modal</Text> </TouchableHighlight> </View> ) } } export default ModalExample const styles = StyleSheet.create ({ container: { alignItems: 'center', backgroundColor: '#ede3f2', padding: 100 }, modal: { flex: 1, alignItems: 'center', backgroundColor: '#f7021a', padding: 100 }, text: { color: '#3f2949', marginTop: 10 } })
我们的起始屏幕将如下所示 -
如果我们点击按钮,模态将打开。
React Native - ActivityIndicator
在本章中,我们将向您展示如何在 React Native 中使用活动指示器。
步骤 1:App
App 组件将用于导入和显示我们的 ActivityIndicator。
App.js
import React from 'react' import ActivityIndicatorExample from './activity_indicator_example.js' const Home = () => { return ( <ActivityIndicatorExample /> ) } export default Home
步骤 2:ActivityIndicatorExample
Animating 属性是一个布尔值,用于显示活动指示器。后者在组件挂载 6 秒后关闭。这是使用 closeActivityIndicator() 函数完成的。
activity_indicator_example.js
import React, { Component } from 'react'; import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native'; class ActivityIndicatorExample extends Component { state = { animating: true } closeActivityIndicator = () => setTimeout(() => this.setState({ animating: false }), 60000) componentDidMount = () => this.closeActivityIndicator() render() { const animating = this.state.animating return ( <View style = {styles.container}> <ActivityIndicator animating = {animating} color = '#bc2b78' size = "large" style = {styles.activityIndicator}/> </View> ) } } export default ActivityIndicatorExample const styles = StyleSheet.create ({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 70 }, activityIndicator: { flex: 1, justifyContent: 'center', alignItems: 'center', height: 80 } })
当我们运行应用程序时,我们将看到屏幕上的加载器。它将在 6 秒后消失。
React Native - Picker
在本章中,我们将创建一个具有两个可用选项的简单 Picker。
步骤 1:创建文件
这里,我们将使用App.js文件夹作为展示组件。
App.js
import React from 'react' import PickerExample from './PickerExample.js' const App = () => { return ( <PickerExample /> ) } export default App
步骤 2:逻辑
this.state.user 用于控制选择器。
当选择用户时,将触发updateUser函数。
PickerExample.js
import React, { Component } from 'react'; import { View, Text, Picker, StyleSheet } from 'react-native' class PickerExample extends Component { state = {user: ''} updateUser = (user) => { this.setState({ user: user }) } render() { return ( <View> <Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}> <Picker.Item label = "Steve" value = "steve" /> <Picker.Item label = "Ellen" value = "ellen" /> <Picker.Item label = "Maria" value = "maria" /> </Picker> <Text style = {styles.text}>{this.state.user}</Text> </View> ) } } export default PickerExample const styles = StyleSheet.create({ text: { fontSize: 30, alignSelf: 'center', color: 'red' } })
输出
如果点击名称,它会提示你三个选项,如下所示:
你可以选择其中一个,输出结果如下。
React Native - 状态栏
在本节中,我们将向您展示如何在 React Native 中控制状态栏的外观。
状态栏易于使用,您只需设置属性即可更改它。
hidden 属性可用于隐藏状态栏。在我们的示例中,它被设置为false。这是默认值。
barStyle 可以有三个值 – dark-content、light-content 和 default。
此组件还有其他一些可用的属性。其中一些是 Android 或 iOS 特定的。您可以在官方文档中查看。
App.js
import React, { Component } from 'react'; import { StatusBar } from 'react-native' const App = () => { return ( <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "#00BCD4" translucent = {true}/> ) } export default App
如果我们运行应用程序,状态栏将可见,内容将具有深色。
输出
React Native - Switch
在本节中,我们将分几个步骤解释Switch组件。
步骤 1:创建文件
我们将使用HomeContainer组件进行逻辑处理,但我们需要创建展示组件。
现在让我们创建一个新文件:SwitchExample.js。
步骤 2:逻辑
我们正在将值从state和切换开关项的函数传递给SwitchExample组件。切换函数将用于更新状态。
App.js
import React, { Component } from 'react' import { View } from 'react-native' import SwitchExample from './switch_example.js' export default class HomeContainer extends Component { constructor() { super(); this.state = { switch1Value: false, } } toggleSwitch1 = (value) => { this.setState({switch1Value: value}) console.log('Switch 1 is: ' + value) } render() { return ( <View> <SwitchExample toggleSwitch1 = {this.toggleSwitch1} switch1Value = {this.state.switch1Value}/> </View> ); } }
步骤 3:展示
Switch 组件接受两个 props。onValueChange prop 在用户按下开关后将触发我们的切换函数。value prop 绑定到HomeContainer组件的状态。
switch_example.js
import React, { Component } from 'react' import { View, Switch, StyleSheet } from 'react-native' export default SwitchExample = (props) => { return ( <View style = {styles.container}> <Switch onValueChange = {props.toggleSwitch1} value = {props.switch1Value}/> </View> ) } const styles = StyleSheet.create ({ container: { flex: 1, alignItems: 'center', marginTop: 100 } })
如果我们按下开关,状态将被更新。您可以在控制台中检查值。
输出
React Native - Text
在本节中,我们将讨论 React Native 中的Text组件。
此组件可以嵌套,并且可以从父级继承属性到子级。这在很多方面都很有用。我们将向您展示首字母大写、样式化单词或文本部分等的示例。
步骤 1:创建文件
我们将要创建的文件是text_example.js
步骤 2:App.js
在此步骤中,我们将创建一个简单的容器。
App.js
import React, { Component } from 'react' import TextExample from './text_example.js' const App = () => { return ( <TextExample/> ) } export default App
步骤 3:文本
在此步骤中,我们将使用继承模式。styles.text 将应用于所有Text组件。
您还可以注意到我们如何为文本的某些部分设置其他样式属性。重要的是要知道所有子元素都具有传递给它们的父级样式。
text_example.js
import React, { Component } from 'react'; import { View, Text, Image, StyleSheet } from 'react-native' const TextExample = () => { return ( <View style = {styles.container}> <Text style = {styles.text}> <Text style = {styles.capitalLetter}> L </Text> <Text> orem ipsum dolor sit amet, sed do eiusmod. </Text> <Text> Ut enim ad <Text style = {styles.wordBold}>minim </Text> veniam, quis aliquip ex ea commodo consequat. </Text> <Text style = {styles.italicText}> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. </Text> <Text style = {styles.textShadow}> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </Text> </Text> </View> ) } export default TextExample const styles = StyleSheet.create ({ container: { alignItems: 'center', marginTop: 100, padding: 20 }, text: { color: '#41cdf4', }, capitalLetter: { color: 'red', fontSize: 20 }, wordBold: { fontWeight: 'bold', color: 'black' }, italicText: { color: '#37859b', fontStyle: 'italic' }, textShadow: { textShadowColor: 'red', textShadowOffset: { width: 2, height: 2 }, textShadowRadius : 5 } })
您将收到以下输出:
React Native - Alert
在本节中,我们将了解如何创建自定义Alert组件。
步骤 1:App.js
import React from 'react' import AlertExample from './alert_example.js' const App = () => { return ( <AlertExample /> ) } export default App
步骤 2:alert_example.js
我们将创建一个按钮来触发showAlert函数。
import React from 'react' import { Alert, Text, TouchableOpacity, StyleSheet } from 'react-native' const AlertExample = () => { const showAlert = () =>{ Alert.alert( 'You need to...' ) } return ( <TouchableOpacity onPress = {showAlert} style = {styles.button}> <Text>Alert</Text> </TouchableOpacity> ) } export default AlertExample const styles = StyleSheet.create ({ button: { backgroundColor: '#4ba37b', width: 100, borderRadius: 50, alignItems: 'center', marginTop: 100 } })
输出
单击按钮后,您将看到以下内容:
React Native - 地理位置
在本节中,我们将向您展示如何使用Geolocation。
步骤 1:App.js
import React from 'react' import GeolocationExample from './geolocation_example.js' const App = () => { return ( <GeolocationExample /> ) } export default App
步骤 2:地理位置
我们将首先设置初始状态,该状态将保存初始位置和最后位置。
现在,我们需要在组件挂载时使用navigator.geolocation.getCurrentPosition获取设备的当前位置。我们将对响应进行字符串化,以便我们可以更新状态。
navigator.geolocation.watchPosition 用于跟踪用户的 位置。我们还在此步骤中清除观察程序。
AsyncStorageExample.js
import React, { Component } from 'react' import { View, Text, Switch, StyleSheet} from 'react-native' class SwichExample extends Component { state = { initialPosition: 'unknown', lastPosition: 'unknown', } watchID: ?number = null; componentDidMount = () => { navigator.geolocation.getCurrentPosition( (position) => { const initialPosition = JSON.stringify(position); this.setState({ initialPosition }); }, (error) => alert(error.message), { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 } ); this.watchID = navigator.geolocation.watchPosition((position) => { const lastPosition = JSON.stringify(position); this.setState({ lastPosition }); }); } componentWillUnmount = () => { navigator.geolocation.clearWatch(this.watchID); } render() { return ( <View style = {styles.container}> <Text style = {styles.boldText}> Initial position: </Text> <Text> {this.state.initialPosition} </Text> <Text style = {styles.boldText}> Current position: </Text> <Text> {this.state.lastPosition} </Text> </View> ) } } export default SwichExample const styles = StyleSheet.create ({ container: { flex: 1, alignItems: 'center', marginTop: 50 }, boldText: { fontSize: 30, color: 'red', } })
React Native - AsyncStorage
在本节中,我们将向您展示如何使用AsyncStorage持久化您的数据。
步骤 1:展示
在此步骤中,我们将创建App.js文件。
import React from 'react' import AsyncStorageExample from './async_storage_example.js' const App = () => { return ( <AsyncStorageExample /> ) } export default App
步骤 2:逻辑
初始状态中的Name为空字符串。组件挂载时,我们将从持久存储中更新它。
setName将获取我们输入字段中的文本,使用AsyncStorage保存它并更新状态。
async_storage_example.js
import React, { Component } from 'react' import { StatusBar } from 'react-native' import { AsyncStorage, Text, View, TextInput, StyleSheet } from 'react-native' class AsyncStorageExample extends Component { state = { 'name': '' } componentDidMount = () => AsyncStorage.getItem('name').then((value) => this.setState({ 'name': value })) setName = (value) => { AsyncStorage.setItem('name', value); this.setState({ 'name': value }); } render() { return ( <View style = {styles.container}> <TextInput style = {styles.textInput} autoCapitalize = 'none' onChangeText = {this.setName}/> <Text> {this.state.name} </Text> </View> ) } } export default AsyncStorageExample const styles = StyleSheet.create ({ container: { flex: 1, alignItems: 'center', marginTop: 50 }, textInput: { margin: 5, height: 100, borderWidth: 1, backgroundColor: '#7685ed' } })
当我们运行应用程序时,我们可以通过在输入字段中键入来更新文本。