React-native学习-11-图片资源

//处理触摸事件

import React, { useState, Component } from 'react';

import { View, Text, Image, Button, Alert,StyleSheet,Platform,TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback,  } from 'react-native';

 

/* 显示一个简单的按钮 */

const ButtonDemo = () => {

  return (

    <View>

      <Text>hello</Text>

      {/* 显示一个简单的按钮 */}

      <Button onPress={

        () => {

          Alert.alert("你点击了按钮");

        }

      }

        title="点我" />

 

    </View>

  );

}

 

/* 显示4个简单的按钮 */

class ButtonBasics extends Component {

  _onPressButton() {

    Alert.alert("You tapped the button");

  }

  render() {

    return (

      <View style={styles.container}>

        <View style={styles.buttonContainer}>

          <Button onPress={this._onPressButton} title="press me" />

        </View>

        <View style={styles.buttonContainer}>

          <Button onPress={this._onPressButton} title="press me" color="#841584" />

        </View>

        <View style={styles.alternativeLayoutButtonContainer}>

          <Button onPress={this._onPressButton} title="This looks great!" />

          <Button onPress={this._onPressButton} title="OK!" color="#841584" />

        </View>

      </View>

    );

  }

}

 

const styles = StyleSheet.create({

  container: {

   flex: 1,

   justifyContent: 'center',

  },

  buttonContainer: {

    margin: 20

  },

  alternativeLayoutButtonContainer: {

    margin: 20,

    flexDirection: 'row',

    justifyContent: 'space-between'

  }

})

 

//Touchable 系列组件  几种按钮风格

class Touchables extends Component {

  _onPressButton() {

    Alert.alert('You tapped the button!')

  }

 

  _onLongPressButton() {

    Alert.alert('You long-pressed the button!')

  }

 

  render() {

    return (

      <View style={styles2.container}>

        <TouchableHighlight onPress={this._onPressButton} underlayColor="white">

          <View style={styles2.button}>

            <Text style={styles2.buttonText}>TouchableHighlight</Text>

          </View>

        </TouchableHighlight>

        <TouchableOpacity onPress={this._onPressButton}>

          <View style={styles2.button}>

            <Text style={styles2.buttonText}>TouchableOpacity</Text>

          </View>

        </TouchableOpacity>

        <TouchableNativeFeedback

            onPress={this._onPressButton}

            background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>

          <View style={styles2.button}>

            <Text style={styles2.buttonText}>TouchableNativeFeedback</Text>

          </View>

        </TouchableNativeFeedback>

        <TouchableWithoutFeedback

            onPress={this._onPressButton}

            >

          <View style={styles2.button}>

            <Text style={styles2.buttonText}>TouchableWithoutFeedback</Text>

          </View>

        </TouchableWithoutFeedback>

        <TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">

          <View style={styles2.button}>

            <Text style={styles2.buttonText}>Touchable with Long Press</Text>

          </View>

        </TouchableHighlight>

      </View>

    );

  }

}

 

const styles2 = StyleSheet.create({

  container: {

    paddingTop: 60,

    alignItems: 'center'

  },

  button: {

    marginBottom: 30,

    width: 260,

    alignItems: 'center',

    backgroundColor: '#2196F3'

  },

  buttonText: {

    textAlign: 'center',

    padding: 20,

    color: 'white'

  }

})

export default Touchables;//ButtonDemo ButtonBasics Touchables