Handling Touches - RN3
7675 ワード
1. basic button
format:
Usage:
(1) import
(2) src
2. Actual button
format:
for example:
Usage:
(1) import
(2) src
Reference:
1. Handling Touches - Displaying a basic button
2. Handling Touches - Touchables
format:
<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 (
Open up App.js to start working on your app!
<Button
onPress={() => {
Alert.alert("You are Right!");
}}
title="Push me"
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
2. Actual button
format:
event>
caption
for example:
this._onPressButton} underlayColor="white">
I am a rounded button
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 (
this._onPressButton} underlayColor="white">
I am a rounded button
);
}
}
const styles = StyleSheet.create({
container: {
paddingTop: 60,
alignItems: 'center'
},
button: {
marginBottom: 30,
width: 260,
alignItems: 'center',
backgroundColor: '#2196F3',
borderRadius:10
},
buttonText: {
padding: 20,
color: 'white'
}
});
Reference:
1. Handling Touches - Displaying a basic button
2. Handling Touches - Touchables