React-native-buttons

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

Copy

デフォルトの 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'
   }
})

Copy

ボタンTouchopacity

タッチ可能なハイライト

ユーザーが要素を押すと、要素が暗くなり、下にある色が透けて見えます。

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

Copy

タッチ可能なネイティブフィードバック

これは、要素が押されたときのインクアニメーションをシミュレートします。

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

Copy

フィードバックなしでタッチ可能

これは、アニメーションなしでタッチイベントを処理する場合に使用する必要があります。通常、このコンポーネントはあまり使用されません。

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

Copy