web-dev-qa-db-fra.com

Pass Pops StackNavigator

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

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 la zone StackNavigator?

merci

react-nativereact-navigation
4
Ansyori

Si vous voulez passer des accessoires à cet endroit, vous devez l'utiliser comme ceci.

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

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

9
Ashwin Mothilal

faites comme ceci dans votre événement click:

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

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

et dans un autre é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
    }
  }

movie est un objet json contenant le titre, l'année, la date de sortie, les résultats, les affiches, etc.

celui-ci est pour l'ancienne navigation:

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

et en deuxième écran:

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

maintenant vous pouvez voir la difference

si cela ne fonctionne pas, essayez comme ça

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

vérifiez ceci pour la navigation de pile imbriquée https://github.com/react-community/react-navigation/issues/143 }

3
Sagar Chavada

Dans mon cas, je souhaitais transmettre une fonction pour afficher toast avec conte pour chaque composant. Je l'ai finalement réalisé en utilisant screenProps et en surchargeant 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 de mon composant:

this.props.screenProps.showToast("Logging you in");
1
TacoEater

Je dois envoyer les accessoires du composant principal à StackNavigator, puis le transmettre à son composant. J'ai utilisé screenProps pour le faire.

Votre fonction principale devrait ressembler à ceci:

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

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

this.props.screenProps.params
0
Pushpendra

Ma réponse précédente est valable si vous essayez d'accéder au niveau de l'application à partir d'une vue de navigation. Toutefois, si vous souhaitez simplement modifier l'en-tête ou quelque chose du genre, vous n'avez pas à passer les paramètres à votre navigateur.

Un peu de magie React:

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
            });
        }
...
0
TacoEater