更新：使用内置按钮组件。

弃用：

包装你查看到TouchableHighlight iOS和TouchableNativeFeedback为Android。

var {
  Platform,
  TouchableHighlight,
  TouchableNativeFeedback 
} = React;

var tapSpeed = React.createClass({
  buttonClicked: function() {
    console.log('button clicked');
  },
  render: function() {
    var TouchableElement = TouchableHighlight;
    if (Platform.OS === 'android') {
     TouchableElement = TouchableNativeFeedback;
    }
    return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Tap me as fast as you can!
      </Text>
      <TouchableElement
        style={styles.button}
        onPress={this.buttonClicked.bind(this)}>
        <View>
          <Text style={styles.buttonText}>Button!</Text>
        </View>
      </TouchableElement>        
    </View>
    );
  }
});       

您可以使用内置的 react-native Button 元素。

import React, { Component } from 'react';
import { StyleSheet, View, Button, Alert, AppRegistry } from 'react-native';

class MainApp extends Component {

_onPress() {
  Alert.alert('on Press!');
 }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button onPress={this._onPress} title="Hello" color="#FFFFFF" accessibilityLabel="Tap on Me"/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  buttonContainer: {
    backgroundColor: '#2E9298',
    borderRadius: 10,
    padding: 10,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 10,
    shadowOpacity: 0.25
  }
})

AppRegistry.registerComponent('MainApp', () => MainApp);

在这里阅读更多。

该react天然按钮包提供的样式等天然按钮的按钮。安装它npm install react-native-button并在您的组件中使用它，如下所示：

var Button = require('react-native-button');

var ExampleComponent = React.createClass({
  render() {
    return (
      <Button
        style={{borderWidth: 1, borderColor: 'blue'}}
        onPress={this._handlePress}>
        Press Me!
      </Button>
    );
  },

  _handlePress(event) {
    console.log('Pressed!');
  },
});

您有两种选择来实现可触摸的组件/按钮来处理用户事件。

• 一种是使用内置Button组件。检查这里的文档http://facebook.github.io/react-native/docs/button.html
• 两个使用TouchableHighlightorTouchableNativeFeedback或TouchableOpacityor TouchableWithoutFeedback。将此视为您将应用程序的不同区域转换为可点击（可点击）或创建自定义按钮的一种方式。根据用户点击后的行为方式，此处的每个组件都不同。查看文档以获取更多详细信息。http://facebook.github.io/react-native/docs/touchablewithoutfeedback.html等。

关于 React Native 中的样式，您需要了解 flexbox 布局。检查这个CSS Flexbox的文章的所有规则都适用于react本地https://css-tricks.com/snippets/css/a-guide-to-flexbox/除非你将不得不利用规则如align-content以alignContent