Tengo una pantalla con vistas de tarjeta.
Cada vista de tarjeta tiene:
Tenía la esperanza de encontrar una forma en que cada opacidad táctil tenga una navegación diferente. El artículo 0 tendrá navegación a la pantalla x, el artículo 1 tendrá navegación a la pantalla y.
Mi duda es posible tener diferentes funciones para cada opacidad táctil?
function ServiceCoverageButtong() { const navigation = useNavigation(); return ( <View> <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('GeneralInformationSupportScreen')}> <Text style={styles.buttonText}>Teste</Text> </TouchableOpacity> </View> ); } const CardItemNewsProvider = ({item, index}) => { return ( <View style={styles.container} key={index}> <Image source={item.imgUrl} style={styles.image} /> <Text style={styles.header}>{item.title}</Text> <Text style={styles.body}>{item.body}</Text> <ServiceCoverageButtong /> </View> ); }; ¿Cómo puedo crear varias funciones y usar el item de CardItemNewsProvider ?
Soy nuevo en React Native y estoy luchando para hacerlo.
Gracias :)
Si usa un componente para sus botones, simplemente puede agregar onPress prop a su DataNewsProvider
let DataNewsProvider = [ { title: NewsHomeCountryTitle, body: NewsHomeCountryBody, imgUrl: Images.newsYourCountryImage, textButton: NewsTextButton, onPress: () => navigation.navigate('GeneralInformationSupportScreen'), }, { title: NewsWorldwideTitle, body: NewsWorldwideBody, imgUrl: Images.newsWorldwideImage, textButton: NewsTextButton, onPress: () => navigation.navigate('anotherScreen'), }, ];Y pásalo a los componentes de tu botón TouchableOpacity
const CardItemNewsProvider = ({item, index}) => { return ( <View style={styles.container} key={index}> <Image source={item.imgUrl} style={styles.image} /> <Text style={styles.header}>{item.title}</Text> <Text style={styles.body}>{item.body}</Text> <ServiceCoverageButtong state={item.stateButton} onPress={item.onPress}/> </View> ); };De esta manera, no necesita tener condiciones adicionales, y simplemente pasa esas funciones tal como están.
Si es posible. Puede pasar un accesorio a su <ServiceCoverageButtong state={"0"}/>
Y en su ServiceCoverageButtong() obtenga el estado de sus accesorios y ejecute una verificación de lo que debe devolverse.
function ServiceCoverageButtong({state}) { const navigation = useNavigation(); if (state == "0") { return ( <View> <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('GeneralInformationSupportScreen')}> <Text style={styles.buttonText}>Teste</Text> </TouchableOpacity> </View> ); } } else { return ( <View> <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('anotherScreen')}> <Text style={styles.buttonText}>Teste</Text> </TouchableOpacity> </View> ); } }Gracias caslawter!
Para cualquier persona interesada.
function ServiceCoverageButtong({state}) { const navigation = useNavigation(); if (state === '0') { console.log('state', state); return ( <View> <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('GeneralInformationSupportScreen') }> <Text style={styles.buttonText}>Hi I'm a test</Text> </TouchableOpacity> </View> ); } else { console.log('state', state); return ( <View> <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('anotherScreen')}> <Text style={styles.buttonText}>You're really into testing</Text> </TouchableOpacity> </View> ); } } const CardItemNewsProvider = ({item, index}) => { return ( <View style={styles.container} key={index}> <Image source={item.imgUrl} style={styles.image} /> <Text style={styles.header}>{item.title}</Text> <Text style={styles.body}>{item.body}</Text> <ServiceCoverageButtong state={item.stateButton} /> </View> ); };Y otro fragmento:
let DataNewsProvider = [ { title: NewsHomeCountryTitle, body: NewsHomeCountryBody, imgUrl: Images.newsYourCountryImage, textButton: NewsTextButton, stateButton: '0', }, { title: NewsWorldwideTitle, body: NewsWorldwideBody, imgUrl: Images.newsWorldwideImage, textButton: NewsTextButton, stateButton: '1', }, ];