Em React Native, os componentes são blocos de construção fundamentais que representam uma parte da interface do usuário. Esses componentes podem ser simples, como um texto ou um botão, ou podem ser complexos, como um formulário inteiro ou uma lista de itens.
Exemplo de utilização de um componente
<Text>Olá mundo!</Text>
Para criar um componente básico você pode definir uma função que representa o componente. Para utilizar o componente em outros componentes, você precisará primeiro exportá-lo no arquivo onde ele foi definido. Para exportá-lo, você pode usar a palavra-chave export default:
Aqui está um exemplo básico de um componente que renderiza um texto:
import { Text } from 'react-native';
const MeuComponente = () => {
return (
<Text>Olá, mundo!</Text>
);
}
export default MeuComponente;
Este componente é criado usando a sintaxe de função e retorna um elemento <Text> que contém a string "Olá, mundo!".
Com o componente exportado, agora você pode importá-lo em outro arquivo React Native. Para fazer isso, use a palavra-chave import, seguida do caminho do arquivo onde o componente foi definido e o nome que você deseja dar ao componente no arquivo atual. Por exemplo:
import { View } from 'react-native';
import MeuComponente from './MeuComponente';
const App = () => {
return (
<View style={{flex:1, justifyContent:'center',alignItems:'center'}}>
<MeuComponente />
</View>
);
}
export default App;
Componentes personalizados são importantes porque permitem que você crie elementos reutilizáveis que podem ser usados em diferentes partes do seu aplicativo. Isso significa que, uma vez que você criou um componente personalizado, pode usá-lo sempre que precisar desse tipo de elemento, sem precisar escrever o código novamente. Isso economiza muito tempo e torna o desenvolvimento de aplicativos mais eficiente.
Para criar um componente personalizado, você precisará definir uma nova função em um arquivo com o mesmo nome da função. Essa nova função representará seu componente personalizado. Aqui está um exemplo básico de um componente personalizado que renderiza um texto:
import { Text } from 'react-native';
const MeuComponente = ({nome}) => {
return <Text>{nome}</Text>;
};
export default MeuComponente;
Neste exemplo, o componente MeuComponente recebe um parâmetro nome através de props. Em seguida, o valor desse parâmetro é exibido em um elemento Text. Para passar o valor para o componente, você simplesmente define o valor desejado como um parâmetro da função que define o componente:
Props (abreviação de propriedades) são uma parte fundamental do React Native e são usados para passar dados entre componentes.
Props são valores que são passados para um componente como parâmetros quando ele é renderizado. Eles são usados para personalizar a aparência ou o comportamento do componente.
Para usar Props em um componente React Native, você pode definir os parâmetros que o componente receberá em sua declaração de função.
Aqui está um exemplo de como usar props em um componente React Native simples:
import { Text } from 'react-native';
const MeuComponente = ({nome}) => {
return <Text>{nome}</Text>;
};
export default MeuComponente;
Neste exemplo, o componente MeuComponente recebe um parâmetro chamado nome. Em seguida, o valor desse parâmetro é exibido em um elemento Text.
Para passar o valor para o componente, você simplesmente define o valor desejado como a propriedade nome:
import { View } from 'react-native';
import MeuComponente from './MeuComponente';
const App = () => {
return (
<View style={{flex:1, justifyContent:'center',alignItems:'center'}}>
<MeuComponente nome="Angoti"/>
</View>
);
}
export default App;
A grande vantagem de criar componentes personalizados é que você pode reutilizá-los em diferentes partes do seu aplicativo. Por exemplo, se você tem um componente personalizado que renderiza um botão, pode usá-lo em diferentes telas e em diferentes contextos, em vez de escrever o código do botão do zero em cada lugar. Isso torna o código mais limpo, mais organizado e mais fácil de manter.
Os componentes personalizados são uma parte fundamental do React Native e permitem criar elementos reutilizáveis que podem ser usados em diferentes partes do seu aplicativo. Criar componentes personalizados é fácil e economiza muito tempo, o que torna o desenvolvimento de aplicativos mais eficiente. Lembre-se de que quanto mais você reutilizar seus componentes personalizados, mais fácil será manter e expandir seu aplicativo ao longo do tempo.
A comunicação entre componentes é uma parte importante do desenvolvimento de aplicativos. Existem várias maneiras de comunicar informações entre componentes, incluindo a passagem de informações do pai para o filho, do filho para o pai e entre irmãos.
Uma maneira de passar informações de um componente pai para um componente filho em React Native é usando props. Como mencionado anteriormente, props são valores que são passados para um componente como parâmetros. Você pode passar valores para um componente filho através de props e acessá-los dentro do componente filho.
Por exemplo, se você tiver um componente pai que define um valor de texto e um componente filho que exibe esse texto, você pode passar o valor de texto para o componente filho usando props. Aqui está um exemplo:
import { View, Text } from 'react-native';
const Pai = () => {
const texto = 'Olá, mundo!';
return (
<View>
<Filho texto="Angoti"} />
</View>
);
};
const Filho = ({texto}) => {
return (
<View>
<Text>{texto}</Text>
</View>
);
};
Neste exemplo, estamos passando a propriedade texto do componente pai Pai para o componente filho Filho usando props. Em seguida, estamos exibindo o valor da propriedade texto dentro do componente filho Filho.
Para passar informações de um componente filho para um componente pai em React Native, você pode definir uma função de retorno de chamada (callback function) no componente pai e passá-la para o componente filho usando props. O componente filho pode, então, chamar a função de retorno de chamada para informar ao componente pai que alguma ação foi executada.
Por exemplo, se você tiver um componente pai que define uma função de retorno de chamada para atualizar um contador e um componente filho que tem um botão que incrementa o contador, você pode passar a função de retorno de chamada para o componente filho e chamar a função quando o botão for clicado. Aqui está um exemplo:
import{ useState } from 'react';
import { View, Text } from 'react-native';
const Pai = () => {
const [contador, setContador] = useState(0);
const atualizarContador = () => {
setContador(contador + 1);
};
return (
<View>
<Text>Contador: {contador}</Text>
<Filho onPress={atualizarContador} />
</View>
);
};
const Filho = ({onPress}) => {
return (
<View>
<Button title="Clique aqui" onPress={onPress} />
</View>
);
};
texto e exibe um título grande e em negrito na tela com o texto fornecido.placeholder e exibe um campo de texto simples na tela com o texto fornecido como um espaço reservado.