Props

Em React Native, props (abreviação de propriedades) são uma maneira de passar dados de um componente pai para um componente filho. As props permitem que você passe valores ou funções de um componente pai para um componente filho, permitindo uma comunicação eficiente entre os componentes. Aqui está como você pode usar props em React Native:

1. Passando Props:

Para passar uma propriedade para um componente filho, você simplesmente a inclui no componente como se fosse um atributo HTML.

Exemplo:

import React from 'react';
import { View, Text } from 'react-native';

const MeuComponenteFilho = (props) => {
  return (
    <View>
      <Text>{props.texto}</Text>
    </View>
  );
};

const MeuComponentePai = () => {
  return (
    <View>
      <MeuComponenteFilho texto="Olá, mundo!" />
    </View>
  );
};

No exemplo acima, a propriedade texto é passada do componente pai (MeuComponentePai) para o componente filho (MeuComponenteFilho) e é exibida dentro do componente filho.

2. Props Padrão:

Você também pode definir valores padrão para suas props usando defaultProps para garantir que o componente funcione mesmo se uma propriedade não for fornecida.

Exemplo:

import React from 'react';
import { View, Text } from 'react-native';

const MeuComponenteFilho = (props) => {
  return (
    <View>
      <Text>{props.texto}</Text>
    </View>
  );
};

MeuComponenteFilho.defaultProps = {
  texto: 'Texto Padrão',
};

const MeuComponentePai = () => {
  return (
    <View>
      <MeuComponenteFilho /> {/* Sem passar a prop, usará o valor padrão */}
    </View>
  );
};

No exemplo acima, se a prop texto não for passada para MeuComponenteFilho, ele usará o valor padrão definido em defaultProps.

3. Props de Função:

Você também pode passar funções como props. Isso é útil quando você deseja que o componente filho possa chamar uma função definida no componente pai.

Exemplo:

import React from 'react';
import { View, Button } from 'react-native';

const BotaoComponente = (props) => {
  return (
    <View>
      <Button title="Clique-me" onPress={props.onPress} />
    </View>
  );
};

const MeuComponentePai = () => {
  const lidarComClique = () => {
    alert('Botão Clicado!');
  };

  return (
    <View>
      <BotaoComponente onPress={lidarComClique} />
    </View>
  );
};

Neste exemplo, a função lidarComClique definida no componente pai é passada como uma prop chamada onPress para o componente filho BotaoComponente. Quando o botão é clicado no componente filho, ele chama a função passada como prop, permitindo que o componente pai responda ao evento de clique.

Espero que isso ajude a entender como usar props em React Native. Se você tiver mais perguntas ou precisar de mais informações, sinta-se à vontade para perguntar!