comment créer un composant commun pour l'image de fond et le bouton dans reac-native?

Question

Je suis nouveau dans le développement de la réaction-native. Je veux créer un composant commun pour l'image de fond et aussi pour le bouton à utiliser dans différentes classes. comment créer ceci.

merci à l'avance

Answer 1

Ce que je fais est d'avoir un dossier sur les composants noms de src/. Créez un répertoire commun/. Créez maintenant un nom de fichier Button.js

Vous pouvez définir dans ce bouton tout ce dont vous avez besoin. Dans mon cas je passe l'action onPress du bouton un peu de style pour le bouton et d'autres pour le texte du bouton.

Vous pouvez également avoir une propriété appelée « enfants » si vous voulez passer quoi que ce soit enveloppé dans la balise vers le bas du composant comme dans l'exemple ci-dessous

<Button>children</Button> 

mon composant ressemblerait à ceci

import React from 'react' 
import { 
    Text, 
    TouchableOpacity, 
    StyleSheet 
} from 'react-native' 

const Button = ({ children, onPress, style, buttonTextStyle }) => { 
    const { 
     buttonStyle, 
     textStyle 
    } = styles 

    return (
    <TouchableOpacity style={[buttonStyle, style]} onPress={onPress}> 
     <Text style={[textStyle, buttonTextStyle]}> 
     {children} 
     </Text> 
    </TouchableOpacity> 
) 
} 

const styles = StyleSheet.create({ 
    textStyle: { 
    alignSelf: 'center', 
    color: '#FFFFFF', 
    fontSize: 16, 
    fontWeight: '600', 
    paddingTop: 10, 
    paddingBottom: 10 
    }, 
    buttonStyle: { 
    flex: 1, 
    alignSelf: 'stretch', 
    backgroundColor: '#17b5b3' 
    } 
}) 

export { Button } 

Vous pouvez utiliser le composant TouchableOpacity de react-native ou TouchableWithoutFeedback ou autre, mais dans ce cas j'utilise TouchableOpacity pour démo.

Vous pouvez l'appeler par refference ce dossier

import Button from './common/Button'