React Native Button元素 – React Native实战教程

上一章React Native实战教程请查看：React Native HTTP网络请求

在本章中，我们将向你展示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="红色按钮" color="red" />;
};
export default App;

如果默认按钮组件不适合你的需求，你可以使用以下组件之一。

TouchableOpacity

这个元素将改变一个可触摸元素的不透明度。

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

TouchableHighlight

当用户按下这个元素时，它会变暗，底层颜色会显示出来。

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

TouchableNativeFeedback

这将模拟当元素被按下时的墨水动画。

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

当你想在没有任何动画的情况下处理触摸事件时，应该使用这个组件。

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