React Native - Các nút

Trong chương này, chúng tôi sẽ chỉ cho bạn các thành phần có thể chạm vào trong react Native. Chúng tôi gọi chúng là 'có thể chạm được' vì chúng cung cấp các hình ảnh động tích hợp sẵn và chúng tôi có thể sử dụngonPress hỗ trợ để xử lý sự kiện chạm.

Facebook cung cấp Button, có thể được sử dụng như một 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 mặc định Button thành phần 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ế.

Độ mờ có thể chạm

Phần tử này sẽ thay đổi độ mờ của một phần tử khi 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'
   }
})

Điểm nổi bật có thể chạm

Khi người dùng nhấn vào phần tử, nó sẽ tối hơn và màu bên dưới 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'
   }
})

Phản hồi gốc có thể chạm

Thao tác này sẽ mô phỏng hoạt ảnh mực 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'
   }
})

Có thể chạm mà không cần phản hồi

Điều này nên được sử dụng 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>