📜  react native 中的 TouchableHighlight 是什么?

📅  最后修改于: 2022-05-13 01:56:47.751000             🧑  作者: Mango

react native 中的 TouchableHighlight 是什么?

TouchableHighlight 是一个组件,用于为视图提供一个包装器,以使它们正确响应基于触摸的输入。按下时,TouchableHighlight 组件的不透明度会降低,这允许底层视图或其他组件的样式被突出显示。

该组件必须只有一个子组件。如果有多个子组件,则将它们包装在 View 组件中。 TouchableHighlight 必须有一个子组件。

句法:


    // Child Component

TouchableHighlight 道具:

  • onPress:用于指定释放触摸时调用的函数。
  • disabled:如果其值为 true,则禁用所有交互。默认值为“假”。
  • style:用于指定 TouchableHighlight 组件的样式
  • activeOpacity:用于指定触摸活动时被包裹的View的不透明度值。它的取值介于 0 和 1 之间,默认值为 0.85。
  • underlayColor:用于指定触摸活动时显示的底层颜色。

现在让我们从实现开始:

  • 第 1 步:打开终端并通过以下命令安装 expo-cli。

    npm install -g expo-cli
  • 第2步:现在通过以下命令创建一个项目。

    expo init TouchableHighlightDemo
  • 第 3 步:现在进入您的项目文件夹,即 TouchableHighlightDemo

    cd TouchableHighlightDemo

项目结构:它将如下所示:

示例:现在让我们实现 TouchableHighlight。在下面的示例中,我们有一个按钮,当用户单击它时,将演示 TouchableHighlight 功能。

App.js
import React from 'react';
import { StyleSheet,
         Text, 
         View, 
         TouchableHighlight, 
         Alert } from 'react-native';
  
export default function App() {
  return (
    
  
       {
        Alert.alert("Touchable Highlight pressed.");
      }}
        style={styles.touchable}
        activeOpacity={0.5}
        underlayColor="#67c904"
      >
        Click Me!
      
    
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  touchable: {
    height: 50,
    width: 200,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#4287f5'
  },
  text: {
    color: "#fff"
  }
});


使用以下命令启动服务器

npm run android

输出:如果你的模拟器没有自动打开,那么你需要手动打开。首先,去你的安卓工作室并运行模拟器。现在再次启动服务器。

参考: https://reactnative.dev/docs/touchablehighlight