Button

React Native按鈕有4種

• Button：基本的按鈕
• TouchableOpacity：按下去時會消失然後顯示
• TouchableHighlight：按下去時會有背景顏色
• TouchableWithoutFeedback：按下去時沒有任何顯示

Button

import React from 'react';
import {Text, StyleSheet, View, Button} from 'react-native';

const HomeScreen = function(){
  return(
    <View>
      <Button title="Press me" onPress={() => console.log('Button Pressed!')} />
    </View>
  );
}

const styles = StyleSheet.create({});

export default HomeScreen;

TouchableOpacity

import React from 'react';
import {Text, StyleSheet, View, Button, TouchableOpacity} from 'react-native';

const HomeScreen = function(){
  return(
    <View>
      <TouchableOpacity onPress={() => console.log('Opacity Pressed!')} >
      <Text>List Demo</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({});

export default HomeScreen;

TouchableHightlight

import React from 'react';
import {Text, StyleSheet, View, Button, TouchableHightlight} from 'react-native';

const HomeScreen = function(){
  return(
    <View>
      <TouchableHightlight underlayColor="#CCC" onPress={() => console.log('Highlight Pressed!')} >
      <Text>List Demo</Text>
      </TouchableHightlight>
    </View>
  );
}

const styles = StyleSheet.create({});

export default HomeScreen;

TouchableWithoutFeedback

import React from 'react';
import {Text, StyleSheet, View, Button, TouchableWithoutFeedback} from 'react-native';

const HomeScreen = function(){
  return(
    <View>
      <TouchableWithoutFeedback onPress={() => console.log('withoutfeedback Pressed!')} >
      <Text>List Demo</Text>
      </TouchableWithoutFeedback>
    </View>
  );
}

const styles = StyleSheet.create({});

export default HomeScreen;