React Native - Кнопки

В этой главе мы покажем вам сенсорные компоненты в react Native. Мы называем их "осязаемыми", потому что они предлагают встроенную анимацию, и мы можем использоватьonPress prop для обработки события касания.

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>