Pass Accessoires StackNavigator

j'essaie de transmettre des accessoires sur stacknavigator, voici mon code

JS:

const MainCart = StackNavigator({
  Cart: {
    screen: CartScreen
  },
  Checkout: {
    screen: COScreen
  }

  /* how to pass 'myprops' in this area? */

});


export default class ReactNative_RefreshControl extends Component {

  constructor(props) {
    super(props)
  }

  render() {
    console.log('ReactNative_RefreshControl this.props.myparam : ' + this.props.myparam);
    return <MainCart myprops = {
      this.props.myparam
    }
    />;

    //https://reactnavigation.org/docs/navigators/stack#Navigator-Props
  }


}

comment passer "myprops" sur StackNavigator région?

grâce

InformationsquelleAutor Ansyori | 2017-10-31
  1. 13

    Si vous souhaitez passer des accessoires que vous utilisez comme ça.

    const MainCart = StackNavigator({
 Cart: {
    screen: props=> <CartScreen {...props} screenProps={other required prop}>
 },
 Checkout: {
    screen: COScreen
 }

    Si vous souhaitez passer des accessoires lors de la navigation dans la solution par Sagar Chavada est utile

    • Ce n'est pas de travail pour moi, je suis capable de voir seulement la navigation accessoires.
    • Quels sont les accessoires que vous envoyez?
    InformationsquelleAutor Ashwin Mothilal
  2. 5

    dans votre événement click de faire comme ceci:

        onPressed(movie){
        this.props.navigation.navigate(
          'screen',
          {movie: movie}
        });
      }

<TouchableHighlight onPress={() => this.onPressed(movie)}>

    et dans d'autres de l'écran vous pouvez définir comme ceci:

    export default class NavigateTo extends Component {
  constructor(props){
    super(props);

    this.state = {
        name: this.props.navigation.state.params.movie.title,
        year: this.props.navigation.state.params.movie.year
    }
  }

    film est un objet json qui contient le titre, l'année, la date de sortie, gain, affiche, etc..

    c'est un vieux de navigation:

    onPressed(movie){
    this.props.navigator.push({
      id:'page2',
      movie: movie
    });
  }

    et dans le deuxième écran:

    this.state = {
        name: this.props.movie.title,
        email: this.props.movie.year
    }

    maintenant, vous pouvez voir l' différence

    si ce n'est pas le travail que d'essayer comme ceci

    <Button title="Second" onPress={() => navigate("MainCart",{},
  {
    type: "Navigate",
    routeName: "Checkout",
    params: {name:"Jo"}
  }
)} />

    vérifier imbriquée pile de navigation
    https://github.com/react-community/react-navigation/issues/143

    InformationsquelleAutor Sagar Chavada
  3. 3

    Dans mon cas, j'ai voulu passer d'une fonction pour afficher le toast avec le conte de chaque composant, j'ai fini par y parvenir en utilisant screenProps et primordial de chaque composant:

    export default class App extends React.Component {
constructor(props) {
super(props);
}
showToast = (text) => {
this.refs.toast.show(text, DURATION.FOREVER);
};
render() {
return <Provider store={store}>
<View style={styles.wrapper}>[
<MyAppNavigator showToast={this.showToast}/>,
<Toast ref="toast"/>
]
</View>
</Provider>;
}
}
const styles = StyleSheet.create({
wrapper: {
flex: 1
}
});
const createNavigator = (screenProps) => {
const toastWrapper = (Component, props, screenProps) => {
return <Component {...props} screenProps={screenProps}/>
};
return createStackNavigator({
login: {
screen: props => toastWrapper(LoginView, props, screenProps),
navigationOptions: () => {
return {header: null}
}
},
map: {
screen: props => toastWrapper(FieldMap, props, screenProps),
navigationOptions: () => ({
title: 'Map'
})
}
})
};
const MyAppNavigator = (props) => {
const AppNavigator = createNavigator(props);
return <AppNavigator/>
};

    Puis, à partir de mon composant:

    this.props.screenProps.showToast("Logging you in");
    InformationsquelleAutor TacoEater
  4. 0

    J'ai besoin d'envoyer des accessoires de composant principal de StackNavigator et en passant ensuite en bas du composant, j'ai utilisé screenProps de le faire.

    Votre fonction principale devrait ressembler à ceci:

    render() {
return <MainCart screenProps={this.props.params}
/>;
}

    Après que, dans l'écran navigateur, vous pouvez y accéder comme ceci:

    this.props.screenProps.params
    • Les deux sont corrects, mais les deux sont des choses différentes, vous envoyez screenProps à partir d'un composant à StackNavigator. Je suis d'envoi screenProps de StackNavigator de composant.
    • ouais mon problème était comme l'envoi d'accessoires de la composante principale de la pile navigator en outre de transmettre à du navigateur de composants.
    InformationsquelleAutor Pushpendra
  5. 0

    Ma précédente réponse tient si vous essayez d'accéder à l'app niveau à partir d'une navigation à vue, cependant, si vous souhaitez simplement modifier l'en-tête ou quelque chose comme ça vous n'avez pas à passer les paramètres de votre navigateur.

    Un peu de Réagir de la magie:

    export default class ReactNative_RefreshControl extends Component {
constructor(props) {
super(props)
}
//this function will override the navigation options specified in MainCart component
static navigationOptions = ({navigation}) => {
return {
headerTitle: navigation.state.params.name,
headerRight: <Button onPress={navigation.state.params.onClick}/>
};
};
componentDidMount() {
this.props.navigation.setParams({
name: "name",
onClick: this.onClick
});
}
...
}
    InformationsquelleAutor TacoEater