Eu fiz o import do mock e passei os parâmetros com o spreed rest, mas os textos não aparecem na tela
App.js:
import React from 'react'
import { StatusBar, SafeAreaView, View } from 'react-native';
import Cesta from './src/screens/Cesta/index'
import mock from './src/mocks/cesta'
import {
useFonts,
Montserrat_400Regular,
Montserrat_700Bold
} from '@expo-google-fonts/montserrat'
export default function App() {
const [loadedFont] = useFonts({
"MontserratRegular": Montserrat_400Regular,
"MontserratBold": Montserrat_700Bold
});
if(!loadedFont) {
return <View/>
}
return (
<SafeAreaView>
<StatusBar/>
<Cesta {...mock}/>
</SafeAreaView>
);
}
index.js:
import React from 'react';
import { View, StyleSheet } from 'react-native'
import Detalhes from './components/Detalhes';
import Topo from './components/Topo';
export default function Cesta(topo, detalhes){
return <>
<Topo {...topo}/>
<View style={styles.cesta}>
<Detalhes {...detalhes}/>
</View>
</>
}
const styles = StyleSheet.create({
cesta: {
paddingVertical: 8,
paddingHorizontal: 16
}
})
mocks/cesta.js:
const cesta = {
topo: {
title: "Detalhe da cesta",
},
detalhes: {
name: "Cesta de Verduras",
farmImage: logo,
farmName: "Jenny Jack Farm",
description: "Uma cesta com pordutos selecionados cuidadosamente da fazenda direto para sua cozinha",
price: "R$ 40,00"
}
}
export default cesta;
Detalhes.js:
import React from 'react'
import {View, StyleSheet, Image} from 'react-native'
import Texto from '../../../components/Texto'
export default function Detalhes({name, farmImage, farmName, description, price}){
return <>
<Texto style={styles.name}>{name}</Texto>
<View style={styles.farm}>
<Image style={styles.farmImage} source={farmImage}/>
<Texto style={styles.farmName}>{farmName}</Texto>
</View>
<Texto style={styles.description}>{description}</Texto>
<Texto style={styles.price}>{price}</Texto>
</>
}
const styles = StyleSheet.create({
name: {
fontSize: 26,
lineHeight: 42,
color: '#464646',
fontWeight: 'bold'
},
farm: {
flexDirection: 'row',
paddingVertical: 12
},
farmImage: {
width: 32,
height: 32
},
farmName: {
fontSize: 16,
lineHeight: 26,
marginLeft: 12
},
description: {
color: '#A3A3A3',
fontSize: 16,
lineHeight: 26
},
price: {
color: '#2A9F85',
fontWeight: 'bold',
fontSize: 26,
lineHeight: 42,
marginTop: 8
}
})