2017-10-20 18 views
0

J'essaye de charger mon composant parent depuis le composant enfant à la pression du bouton. Mais il ne rend pas les composants parents de la méthode btnPress. Je ne reçois aucune erreur.reac native - Appuyez sur le bouton On charge tout l'écran avec le composant parent

onButtonPress

<Button onPress={() => btnPress(parent_id, id)}> 
       <Icon name="arrow-forward" /> 
</Button> 

btnPress Fonction

function btnPress(parent_id, id) { 
     const App =() => (
     //I have tried this way but this didn't work. No any error, i can see log on console 
     <Container> 
      <Headerc headerText={'Fitness sdaf'} /> 
      <ExerciseList pId={parent_id} mId={id} /> 
     </Container> 
     ); 
     console.log(id); 
     AppRegistry.registerComponent('weightTraining',() => App); 
    } 

code complet (composant enfant)

import React from 'react'; 
import { Right, Body, Thumbnail, Container, ListItem, Text, Icon } from 'native-base'; 
import { AppRegistry 
} from 'react-native'; 
import Headerc from './headerc'; 
import ExerciseList from './exerciseList'; 

import Button from './Button'; 


const ExerciseDetail = ({ exercise }) => { 
    const { menu_name, menu_icon, parent_id, id } = exercise; 

function NumberDescriber() { 
     let description; 
     if (menu_icon === 'noimg.jpg') { 
     description = `http://www.xxxxxx.com/uploads/icons/${menu_icon}`; 
     } else if (menu_icon === 'noimg.jpg') { 
     description = menu_icon; 
     } else { 
     description = `http://www.xxxxx.com/uploads/icons/${menu_icon}`; 
     } 
    return description; 
} 

function btnPress(parent_id, id) { 
    const App =() => (
    <Container> 
     <Headerc headerText={'Fitness sdaf'} /> 
     <ExerciseList pId={parent_id} mId={id} /> 
    </Container> 
    ); 

    console.log('-------------------------------'); 
     console.log(id); 
     console.log('+++++++++++++++++++++++++++'); 
    AppRegistry.registerComponent('weightTraining',() => App); 
} 

return (
    <ListItem> 
    <Thumbnail square size={80} source={{ uri: NumberDescriber() }} /> 
    <Body> 
     <Text>{menu_name}</Text> 
     <Text note> {menu_name} exercise lists</Text> 
    </Body> 
    <Right> 
    <Button onPress={() => btnPress(parent_id, id)}> 
     <Icon name="arrow-forward" /> 
    </Button> 
    </Right> 
    </ListItem> 

); 
}; 

export default ExerciseDetail; 

S'il vous plaît ne laissez-moi savoir, si vous avez besoin de plus amples informations.

+0

Quelle est la raison derrière AppRegistry? Vous avez également probablement besoin d'une bibliothèque de navigation par les sons de celui-ci – linasmnew

+0

@linasmnew Je l'ai gardé en pensant que cela fonctionnera. –

+0

Vous souhaitez accéder au composant parent à partir de ce composant? – linasmnew

Répondre

0

Je ne suggère pas de faire de cette façon, il semble totalement anti-modèle et non. mieux essayer avec la navigation ou créer un motif comme celui-ci

dans votre index.js ou index.android.js ou index.ios.js

import App from './App' //your app level file 
AppRegistry.registerComponent('weightTraining',() => App); 

maintenant dans votre application js

export default App class extends React.Component{ 
constructor(props){ 
    super(props); 
    this.state ={ 
    component1:false, 
    component2:true, 
    } 
} 

btnPressed =()=>{ 
//handle state update logic here 
} 
render(){ 
    if(this.state.component1) return <Component1/> 
    return <Component2/> 
} 
} 

**** pas la meilleure solution disponible, jouer et vous obtiendrez le meilleur

+0

Comment définir 'component1, component2' globalement? –

+0

ces 2 peuvent être juste un composant fonctionnel ou un composant de classe (de la même manière que j'ai défini la classe App –

0

Pour naviguer de ce composant à votre composant parent, sauf si vous souhaitez mettre en œuvre votre propre navigation qui n'est pas recommandée, vous devriez regarder dans celui qui est déjà construit et adopté par beaucoup dans l'écosystème de réaction-natif.

Certains des plus gros:

Personnellement, je recommande fortement l'option numéro 1, car il semble être la plus production testée et production mise en œuvre prêt là-bas