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

  • 相关阅读:
    Binary Tree Maximum Path Sum
    ZigZag Conversion
    Longest Common Prefix
    Reverse Linked List II
    Populating Next Right Pointers in Each Node
    Populating Next Right Pointers in Each Node II
    Rotate List
    Path Sum II
    [Leetcode]-- Gray Code
    Subsets II
  • 原文地址:https://www.cnblogs.com/xiaobin-hlj80/p/10575828.html
Copyright © 2011-2022 走看看