React Native –可触摸对象和屏幕尺寸

React Native makes the process of developing an application that works on both Android and iOS devices much easier than it once was. While before you had to work with at least two programming languages and vastly different APIs, React Native includes some helpful ones out of the box.

React Native使开发可在Android和iOS设备上运行的应用程序的过程比以往更加容易。 在您不得不使用至少两种编程语言和千差万别的API之前，React Native包含了一些有用的功能。

Here's a rundown of two that will help you build your next app.

这里有两个摘要，可帮助您构建下一个应用程序。

可触摸的 (Touchables)

Some of the main features of mobile devices revolve around user touch interactions. How a mobile app handles and responds to these interactions can make or break the user’s experience.

移动设备的一些主要功能围绕着用户触摸交互。 移动应用如何处理和响应这些交互会影响或破坏用户的体验。

React Native ships with a Button component which works for many standard onPress interactions. By default, it will give the user feedback by changing the opacity to show the button was pressed. Usage:

React Native附带一个Button组件，该组件可用于许多标准的onPress交互。 默认情况下，它将通过更改不透明度以显示按钮被按下来向用户提供反馈。 用法：

<Button onPress={handlePress} title="Submit" />

For more complex use cases, React Native has APIs build in to handle press interactions called Touchables.

对于更复杂的用例，React Native具有内置的API来处理称为Touchables新闻交互。

TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback

Each of these Touchable components can be styled and used with a library, like the built-in Animated, allowing you to make your own types of custom user feedback.

可以为每个Touchable组件设置样式并与库一起使用，例如内置的Animated ，允许您进行自己类型的自定义用户反馈。

Some examples of using these components:

使用这些组件的一些示例：

// with images
<TouchableHighlight onPress={this.handlePress}>
  <Image
    style={styles.button}
    source={require('./logo.png')}
  />
</TouchableHighlight>

// with text
<TouchableHighlight onPress={this.handlePress}>
  <Text>Hello</Text>
</TouchableHighlight>

You can handle different types of button presses as well. By default, buttons and touchables are configured to handle regular taps, but you can also denote a function to call for press and hold interactions for example.

您也可以处理不同类型的按钮。 默认情况下，按钮和可触摸项被配置为处理常规轻拍，但是您也可以表示一个函数，例如，要求按下并保持交互。

<TouchableHighlight onPress={this.handlePress} onLongPress={this.handleLongPress}>

To see all of the available props and how these components work, you can look at the JavaScript source code for Touchables here.

要查看所有可用的道具以及这些组件如何工作，可以在此处查看TouchablesJavaScript源代码 。

屏幕尺寸 (Screen Dimensions)

React Native uses Dots Per Inch (DPI) to measure the sizing of the User Interface (UI) and anything displayed on the UI. This type of measurement allows an application to look uniform across various screen sizes and pixel densities.

React Native使用每英寸点数(DPI)来衡量用户界面(UI)以及用户界面上显示的所有内容的大小。 这种类型的测量允许应用程序在各种屏幕尺寸和像素密度下看起来均匀。

For standard use cases, applications can be developed without having to know the specifics of the user’s device (for example, pixel density) since the UI elements will scale automatically.

对于标准用例，由于UI元素将自动缩放，因此无需知道用户设备的详细信息(例如，像素密度)即可开发应用程序。

When it is required, there are APIs available such as PixelRatio to help you find out the pixel density of the user's device.

必要时，可以使用诸如PixelRatio类的API来帮助您找出用户设备的像素密度。

To get the window or screen height/width of a user's device, React Native has an API called Dimensions.

为了获取用户设备的窗口或屏幕的高度/宽度，React Native有一个名为Dimensions的API。

import { Dimensions } from 'react-native';

Here are the methods that the Dimensions API provides:

以下是Dimensions API提供的方法：

Dimensions.get('window').height;
Dimensions.get('window').width;
Dimensions.get('screen').height;
Dimensions.get('screen').width;

Note: There have been some known issues in the past with the Dimensions API such as not returning the correct information when a user rotates their device. It’s best to make sure you test this on actual devices before deploying an application.

注意： Dimensions API过去存在一些已知问题，例如当用户旋转设备时未返回正确的信息。 最好在部署应用程序之前确保您在实际设备上对此进行了测试。

有关响应式设计的更多信息： (More info on responsive design:)

• Free responsive design course

  免费的响应式设计课程

• Best Bootstrap tutorials for responsive web design

  响应式网页设计的最佳Bootstrap教程

• How to think responsively

  如何React敏捷

• Guide to responsive images

  响应式图像指南

• Learn responsive design in 5 minutes

  在5分钟内学习响应式设计

翻译自: https://www.freecodecamp.org/news/react-native-touchables-and-screen-dimensions/