Scribd
Upload
4 views2 pages

React Native Button Component Guide

The document provides an overview of the Button component in React Native, highlighting its basic functionality and customization options. It includes example code for implementing a button with required properties like title and onPress handler, as well as recommendations for accessibility. Additionally, it explains how to adjust the button's appearance on different platforms.

Uploaded by

leandro morais barbosa
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views2 pages

React Native Button Component Guide

The document provides an overview of the Button component in React Native, highlighting its basic functionality and customization options. It includes example code for implementing a button with required properties like title and onPress handler, as well as recommendations for accessibility. Additionally, it explains how to adjust the button's appearance on different platforms.

Uploaded by

leandro morais barbosa
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

22/11/23, 15:57 Botão · Reagir nativo

Botão
Um componente básico de botão que deve funcionar bem em qualquer plataforma.
Suporta um nível mínimo de personalização.

Se este botão não parecer adequado ao seu aplicativo, você poderá criar seu próprio
botão usando Pressable . Para se inspirar, veja o código-fonte do componente Button .

<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>

[Link] 1/7
22/11/23, 15:57 Botão · Reagir nativo

Button Example

import React from 'react';


import {
The title and onPress handler are
StyleSheet,
Button, required. It is recommended to set
View, accessibilityLabel to help make your app
SafeAreaView, usable by everyone.
Text,
Alert, PRESS ME
} from 'react-native';

const Separator = () => <View style={[Link]} Adjust the color in a way that looks
/>; standard on each platform. On iOS, the
color prop controls the color of the text.
const App = () => ( On Android, the color adjusts the
<SafeAreaView style={[Link]}>
background color of the button.
<View>
<Text style={[Link]}>
PRESS ME
The title and onPress handler are required. It
is recommended to set
accessibilityLabel to help make your app usable
All interaction for the component are
by everyone.
</Text>
disabled.
<Button
title="Press me" PRESS ME
onPress={() => [Link]('Simple Button
pressed')}
/> This layout strategy lets the title define
</View> the width of the button.
<Separator />
<View> LEFT BUTTON RIGHT BUTTON
<Text style={[Link]}>
Adjust the color in a way that looks standard on
Preview My Device iOS Android Web

Referência

Obrigatório onPress

Manipulador a ser chamado quando o usuário toca no botão.

TIPO

({nativeEvent: PressEvent})

[Link] 2/7

You might also like