¶ Solution Vidéo Props
Il faut tout d'abord se créer un composant bouton:
Code Button.jsx (qui contient aussi le style.js):
//Button.jsx
import React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
export const Button = props => {
console.log(props);
return (
<TouchableOpacity
onPress={props.onClick}
disabled={props.disabled}
style={styles.button}
>
<Text style={styles.buttonText}>Allo</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
button: {
backgroundColor: '#007AFF', // Couleur bleue iOS par défaut
padding: 10,
borderRadius: 8,
alignItems: 'center',
},
buttonText: {
color: 'white',
fontSize: 16,
fontWeight: '600',
},
});Code pour index.tsx
import { Platform, Alert, Text, TouchableOpacity } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { Article } from '../components/Article/Article';
import { Button } from '../components/Button/Button';
export default function App() {
const handleclick = () => {
alert('Vous avez cliqué sur le bouton!');
};
return (
<SafeAreaProvider>
<SafeAreaView style={{ flex: 1 }}>
<Text style={{ fontSize: 32, fontWeight: 'bold', padding: 16 }}>
Pablo the God
</Text>
<Button onClick={handleclick} disabled={false}>
Click here!
</Button>
<Article title="Hello Earth" id={1}></Article>
<Article title="Hello Moon" id={2} />
</SafeAreaView>
</SafeAreaProvider>
);
}Code pour Article.jsx
//Article.jsx
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { s } from './Article.style';
export const Article = props => {
console.log(props);
return (
<View style={s.container}>
<Text style={s.title}>
{props.id}. {props.title}
</Text>
<Text style={s.paragraph}>{props.children}</Text>
</View>
);
};Code pour Article.style.js
//Article.style.js
import { StyleSheet } from 'react-native';
export const s = StyleSheet.create({
container: {
padding: 16,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 10,
},
paragraph: {
fontSize: 16,
lineHeight: 24,
},
});Résultat sur Mobile:
Résultat sur Web:
