React Native 按钮组件

以下方法介绍了如何在 react-native 中使用 Button。为此，我们将使用 Button 组件。它基本上是一个可点击的组件，用于在用户点击时执行某些操作。

句法：

按钮中的道具：

• onPress：当用户点击按钮时调用。
• 标题：它是显示在按钮内的文本。
• AccessibilityLabel：为盲人辅助功能显示的文本。
• color：用于设置按钮的颜色。
• disabled：如果为真，则用户无法按下按钮。
• hasTVPreferredFocus：电视首选焦点，仅适用于电视。
• nextFocusDown：指定用户向下导航时接收焦点的下一个视图。
• nextFocusForward：指定用户向前导航时接收焦点的下一个视图。
• nextFocusLeft：指定用户向左导航时接收焦点的下一个视图。
• nextFocusRight：指定用户向右导航时接收焦点的下一个视图。
• nextFocusUp：指定用户向上导航时接收焦点的下一个视图。
• testID：用于在端到端测试中定位该视图。
• touchSoundDisabled：如果为 true，则不会在触摸时播放系统声音。

现在让我们从实现开始：

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

  npm install -g expo-cli

• 第2步：现在通过以下命令创建一个项目。

  expo init myapp

• 第 3 步：现在进入您的项目文件夹，即 myapp

  cd myapp

项目结构：它将如下所示。

示例：现在让我们实现 Button。在这里，我们创建了一个 Button，当有人单击该按钮时，计数将发生变化。

应用程序.js

App.js

import React , {useState} from 'react';
import { StyleSheet, Text, View , Button } from 'react-native';
  
export default function App() {
  const [count , setcount] = useState(0);
  const changeCount = () => {
    setcount(count + 1);
  }
  return (
    
        {count}
        
    
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text : {
    fontSize : 40,
    marginBottom : 30
  }
});

使用以下命令启动服务器。

npm run android

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

参考： https://reactnative.dev/docs/button