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: ,
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: ,
alignItems: 'center'
},
button: {
marginBottom: ,
width: ,
alignItems: 'center',
backgroundColor: '#2196F3',
borderRadius:
},
buttonText: {
padding: ,
color: 'white'
}
});
Reference: