How can I pass parameters between screens in React Native?

Question

How can I pass parameters between screens in React Native?

Navigation

#1 by (0 votes)

1

My abilities with React Native are very basic, and what I want to get is the posts according to each category.

Categories Screen

import React, {Component} from 'react';
import { NavigationActions, DrawerNavigator,  StackNavigator } from 'react-navigation';
import{Dimensions, Button, View, SafeAreaView, FlatList, ActivityIndicator, TouchableOpacity } from 'react-native';

export default class WGoals extends Component {
static navigationOptions = {
  title: 'Categories'
    };

navigateToScreen = (route, params) => () => {
const navigateAction = NavigationActions.navigate({
  routeName: route,
  params: params
});
this.props.navigation.dispatch(navigateAction);
}

constructor(props)
  {
super(props);
this.state = { 
isLoading: true,
  }
}

  render() {

    return (

<Container style={styles.background_general}>
                <TouchableOpacity onPress={this.navigateToScreen('PostsScreen', itemId = '1')} >
                <Text>Category 1</Text>
            </TouchableOpacity>
                <TouchableOpacity onPress={this.navigateToScreen('PostsScreen', itemId = '2')} >
                <Text>Category 2</Text>
                </TouchableOpacity>
</Container>      
    );
  }
}

Posts screen

import React, {Component} from 'react';
import { NavigationActions, DrawerNavigator,  StackNavigator } from 'react-navigation';
import{Dimensions, View, SafeAreaView, FlatList, ActivityIndicator } from 'react-native';

export default class Posts extends Component {
static navigationOptions = {
  title: 'Posts'
};

  render() {

    const { params } = this.props.navigation.state;
    const itemId = params ? params.itemId : null;

    return (

<Container style={styles.background_general}>

<Text>Details Screen</Text>
<Text>itemId: {JSON.stringify(itemId)}</Text>

</Container>

    );
  }
    }

reactjs react-native

asked by anonfidusa 14.04.2018 в 07:15

source

1 answer

How are restrictions made in SQL? You can change the NEW value in a BEFORE UPDATE in SQLite base

score 0 · Answer 1

You must pass an object with the parameters in the navigate () event and pick it up in the destination view, it would look like this:

From your view WGoals call navigate:

this.props.navigation.navigate("Posts", { misPosts: arrayConPosts });

and in your view Posts you take them in the following way:

this.props.navigation.state.params.misPosts

Ideally, collect the parameter data in componentDidMount () and host it in your state, it would look like this:

// create your constructor

constructor(props) {
   super(props);
    this.state = {
     misPosts: []
   };
}

// save your posts when the view is loaded

componentDidMount()
{
  this.setState({misPosts: this.props.navigation.navigate("Posts", {misPosts: arrayConPosts })
}

and lastly in your render () , show the posts in a List:

render(
  const misPosts = this.state.misPosts;

  return(
      <List dataArray={misPosts}
        renderRow={(item) =>
          <ListItem>
            <Text>{item.textoPost}</Text>
          </ListItem>
        }>
      </List>
   )
)

I hope it serves you, you tell us!