React Native – Bài 13: Buttons

Trong chương này, chúng tôi sẽ giới thiệu cho bạn các thành phần có thể chạm được trongReact Native. Chúng ta gọi chúng là ‘touchable’ (có thể chạm được)  vì chúng cung cấp hoạt ảnh được tích hợp sẵn và chúng tôi có thể sử dụng phương thức onPress để xử lý sự kiện chạm.

Facebook cung cấp thành phần Button, có thể được sử dụng làm nút chung. Hãy xem xét ví dụ sau để hiểu tương tự.

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

Nếu thành phần Button mặc định không phù hợp với nhu cầu của bạn, bạn có thể sử dụng một trong các thành phần sau để thay thế.

Touchable Opacity (Độ mờ có thể chạm)

Phần tử này sẽ thay đổi độ mờ của phần tử khi được chạm vào.

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(Điểm nổi bật có thể chạm)

Khi người dùng nhấn vào phần tử, phần tử đó sẽ tối hơn và màu cơ bản sẽ hiển thị xuyên suốt.

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 (Phản hồi gốc có thể chạm)

Thao tác này sẽ mô phỏng hoạt hình viết tay khi phần tử được nhấn.

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 (Có thể chạm mà không cần phản hồi)

Nên sử dụng thành phần này khi bạn muốn xử lý sự kiện chạm mà không có bất kỳ hoạt ảnh nào Thông thường, thành phần này không được sử dụng nhiều.

<TouchableWithoutFeedback>
   <Text>
      Button
   </Text>
</TouchableWithoutFeedback>