React Native - 按钮 - 蝴蝶教程

简述

在本章中，我们将向您展示 React Native 中的可触摸组件。我们称它们为“可触摸”，因为它们提供内置动画，我们可以使用onPress用于处理触摸事件的道具。

Facebook 提供Button组件，可用作通用按钮。请考虑以下示例以理解相同的内容。

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

如果默认Button组件不适合您的需求，您可以使用以下组件之一来代替。

可触摸不透明度

此元素将在触摸时更改元素的不透明度。

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'
   }
})

可触摸的亮点

当用户按下元素时，它会变暗，并且底层的颜色会透出来。

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'
   }
})

可触摸的原生反馈

这将在按下元素时模拟墨水动画。

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'
   }
})

无反馈可触摸

当你想在没有任何动画的情况下处理触摸事件时应该使用此组件通常，此组件用得不多。


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