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>