I am new to reacting to native, and I am unable to transfer variables from one file to another.
module.exports works great when passing classes. However, is there a way in native to transfer variables from file to file by export?
In the example below, one file (button) creates an array of random numbers, and I want to access this array in another file (genreSelector). Similarly, I am trying to pass an array of strings from (genre to selector genre).
I cannot find an example of how to do this, so I get the impression that this is impossible. How should I transmit information if this is not possible? Do I need to have all the functions in my main function and call them from child classes, if so, how can I refer to the function of the parent class, and not to its own this.function?
So the main file is displayed in index.android.js and everything works fine. The bar, of course, passes arrays from file to file. I tried to use states, but still cannot access the variables as desired.
Sorry for such a basic question asked in such a complicated way.
//this is button.js import React, { Component } from 'react'; import { Alert, AppRegistry, StyleSheet, Text, TouchableHighlight, View } from 'react-native'; import styles from '../styles/styles.js'; let rNumbers = [1,2,3]; var Button = React.createClass({ rNumberGen: function(){ let rNumbers = [Math.random(), Math.random(), Math.random()]; }, render: function(){ return( <TouchableHighlight onPress={this.rNumberGen} style={styles.center}> <Text style={styles.button}>Generate!</Text> </TouchableHighlight> ); } }); module.exports = rNumbers; module.exports = Button;
// this is genreSelector
import React, { Component } from 'react'; import { Alert, AppRegistry, StyleSheet, Text, View } from 'react-native'; import{ genre1, genre2, genre3 } from './genres.js'; import rNumbers from './button.js'; import styles from '../styles/styles.js'; let a = rNumbers.toString(); Alert.alert('This is', a); var Genre = React.createClass({ render: function(){ let genre = this.props.selected; return( <View style={styles.genre}> <Text style={styles.center}>{genre}</Text> </View> ); } }); module.exports = Genre;
// This is main.js
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; import Button from './button.js'; import Genre // genres from './genreSelector.js'; import styles from '../styles/styles.js'; class Main extends React.Component { render(){ return( <View style={styles.container}> <Text style={styles.title}>Genre Genrerator</Text> <Text style={[styles.h2, styles.h21]}>I am listening to</Text> <View style={styles.genreContainer}> <Genre selected='{genres[1]}'/> <Genre selected='{genres[2]}'/> <Genre selected='{genres[3]}'/> </View> <Text style={styles.h2}>You filthy casual</Text> <Button/> </View> ); } } module.exports = Main;