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>