react native学习【5.1】——导航——链接变为按钮

1）index.jsx 中添加按钮

为了优化界面，决定添加按钮。

将链接应用为子道具

2）导入部分添加Pressable

import {
    View, Text,StyleSheet, ImageBackground, Pressable } from 'react-native'

3）添加Pressable组件

简单介绍

（来自react native官方文档 https://reactnative.cn/docs/pressable）

Pressable是一个核心组件的封装，可以检测到任意子组件的不同阶段的按压交互情况。

<Pressable onPress={
   onPressFunction}>
<Text>I'm pressable!</Text>
</Pressable>

原理：

在被Pressable包装的元素上：

• onPressIn：在按压时被调用
• onPressOut：在按压动作结束后被调用

在按下onPressIn后，将会出现如下两种情况的一种：

1. 用户移开手指，依次触发onPressOut和onPress事件

2. 按压持续500毫秒以上，触发onLongPress事件（onPressOut在移开手之后依旧会触发）

存在的问题是：手指的精准度不是很精确，人们会不小心按错或者错过了触发区域。

解决方案：Pressable提供了一个可选项HitRect，可以用来定义相对于包裹元素的有效触发距离。在HitRect内的任何地方都可以触发按压动作。

PressRect在保持激活状态的同时，运行用户按压时在元素及设定的范围内滑动，使触控更优雅。

​ 触控区域不会超出绑定的父级 view，在按压到重叠的兄弟视图时，z-index 更高的那个视图会更优先。

具体代码

{
   /* 5.1 添加链接  5.6 添加链接样式  6 作为子道具*/}
      <Link href = "/explore" style = {
   {
   marginHorizontal:'auto'}} asChild>
        {
   /* 6.1 添加按钮 */}
        <Pressable>
          <Text>Explore</Text>
        </Pressable>
      </Link>

代码解释：

1. style={ {marginHorizontal:'auto'}}

   style属性 用于直接在jsx中内联定义样式

   marginHorizontal:‘auto’

   • 表示水平边距为auto，常用于让元素水平居中

   有 两个{}，相当于

 const x = {
    marginHorizontal: 'auto' }; // 定义一个 JavaScript 对象
 <Link style={
   x} />                      // 将这个