zoukankan      html  css  js  c++  java
  • Handling Touches

    1. basic button

       format:

        <tag event caption />

    <Button 
        onPress={{}}
        title="I am button"
     />
            <Button 
                onPress={() => {
                    Alert.alert("You are Right!");
                }}
                title="Push me"
            />

    Usage:

    (1) import

    import {Button, Alert} from "react-native";


    (2) src

    import React from 'react';
    import { StyleSheet, Text, View, Button, Alert } from 'react-native';
    
    export default class App extends React.Component {
      render() {
        return (
          <View style={styles.container}>
            <Text>Open up App.js to start working on your app!</Text>
            <Button 
                onPress={() => {
                    Alert.alert("You are Right!");
                }}
                title="Push me"
            />
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });

    2. Actual button

        format:

         <tag event caption />

            <TouchableHighlight event>
              <View>
                <Text>caption</Text>
              </View>
            </TouchableHighlight>

    for example:

            <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
              <View style={styles.button}>
                <Text style={styles.buttonText}>I am a rounded button</Text>
              </View>
            </TouchableHighlight>

    Usage:

    (1) import

    import {Platform, TouchableHightlight} from "react-native"

    (2) src

    import React from 'react';
    import { StyleSheet, Text, View, Platform, TouchableHighlight, Alert } from 'react-native';
    
    export default class App extends React.Component {
      _onPressButton() {
        Alert.alert('You tapped the button!')
      }
    
      render() {
        return (
          <View style={styles.container}>
            <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
              <View style={styles.button}>
                <Text style={styles.buttonText}>I am a rounded button</Text>
              </View>
            </TouchableHighlight>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        paddingTop: 60,
        alignItems: 'center'
      },
      button: {
        marginBottom: 30,
         260,
        alignItems: 'center',
        backgroundColor: '#2196F3',
        borderRadius:10
      },
      buttonText: {
        padding: 20,
        color: 'white'
      }
    });

    Reference:

      1. Handling Touches - Displaying a basic button

      2. Handling Touches - Touchables

  • 相关阅读:
    C++11并发之std::thread<转>
    YUV420格式解析<转>
    在windows、linux中开启nginx的Gzip压缩大大提高页面、图片加载速度<转>
    curl 超时设置<转>
    C++中map用法详解《转》
    同一台服务器配置多个tomcat服务的方法
    找出两个排好序的数组的中位数
    mysql中设置默认字符编码为utf-8
    大步小步攻击算法_完全版
    ACL登陆认证
  • 原文地址:https://www.cnblogs.com/xiaobin-hlj80/p/10575828.html
Copyright © 2011-2022 走看看