当前位置: 动力学知识库 > 问答 > 编程问答 >

arrays - Export and import observable MobX React Native

问题描述:

I am new to React Native and very new to MobX, only realising i needed it when my first project demanded dynamically updating and changing props/store between files.

Here is the github of the project: https://github.com/Kovah101/GenreGeneratorv1

I am trying to build an app that generates the name of random genre of music.

My main file renders all the components and has a small console.log to check that random numbers are being generated. I don't get any errors here

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

import

GenreSelector

from './genreSelector';

import GenerateButton from './generateButton';

import styles from '../styles/styles';

import randomStore from './generateButton';

var MainOriginal = React.createClass ({

getInitialState() {

return {

chosenRandoms: [ , , ],

};

},

//used to check Generate button is working

changeRandoms(newRandoms) {

this.chosenRandoms = newRandoms;

console.log('the console log works!');

console.log(this.state.chosenRandoms);

} ,

render(){

return (

<View style={styles.container}>

<Text style= {styles.title}>Genre Generator</Text>

<Text style={styles.h2}>I am listening to</Text>

<View style={styles.genreContainer}>

<GenreSelector store={randomStore}/> {//passing randomStore as a prop to selector

}

</View>

<Text style={styles.h2}>You filthy casual</Text>

<GenerateButton onPress={this.changeRandoms}/>

</View>

);

}

});

module.exports = MainOriginal;

Next, GenerateButton renders a button with an onClickevent that generates an array of random numbers, these get checked by mainOriginaland work correctly. I also use MobX to make randomNumbers observable as it is constantly updated and will be passed to the final file genreSelector.

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

TouchableHighlight,

Text,

View

} from 'react-native';

import styles from '../styles/styles';

import {observable} from 'mobx';

var GenerateButton = React.createClass({

generateRandoms: function() {

@observable randomNumbers = [Math.random(), Math.random(), Math.random()];

this.props.onPress(randomNumbers);

},

render: function (){

return (

<TouchableHighlight

onPress={this.generateRandoms}

style={styles.generateButton}>

<Text style={styles.generateButton}>Generate!</Text>

</TouchableHighlight>

);

}

});

const randomStore = new GenerateButton ();

export default randomStore;

module.exports = GenerateButton;

genreSelector should use the array of random numbers map them to the size of the 3 different genre arrays, then render 3 boxes, each with one of the random genres from each array. However I get unexpected tokens at 'chosenRandoms' if i set it to be a 'var' and the same again at 'get randomGenres`, my understanding is they need to be something.

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

import{

genre1,

genre2,

genre3

} from './genres.js';

import styles from '../styles/styles';

import {observer, computed} from 'mobx-react/native';

import randomStore from './generateButton';

const size = [genre1.length, genre2.length, genre3.length];

@observer

class GenreSelector extends Component {

render() {

var chosenrandom = this.props.randomStore.randomNumbers; //accessing the passed state

console.log({chosenrandom});

let randomGenres = [Math.floor(this.chosenrandom[0] * size[0], Math.floor(this.chosenrandom[1] * size[1], Math.floor(this.chosenrandom[2] * size[2]],

//manipulating the passed array -- ERROR AT END OF THIS LINE

return (

<View style={styles.genreContainer}>

<Text style={styles.genreText} >{genre1[randomGenres[0]]}</Text>

<Text style={styles.genreText} >{genre2[randomGenres[1]]}</Text>

<Text style={styles.genreText} >{genre3[randomGenres[2]]}</Text>

</View>

);

}

}

module.exports = GenreSelector;

Does anybody have any ideas on what i'm doing wrong? If i take the var and get out then i get an error at the end of the math manipulation line. I must be misusing something. Thanks for any help, I can provide more of my code but i dont think the problem is in the stylesheet or index.

网友答案:

So i decided to put all the calculations and genre picking to the generatebuttonand just send the array as a prop from the button to the mainOriginal then back to genreselector.

Didn't have to use MobX or anything overly complicated.

Here is the final code: github.com/Kovah101/GenreGeneratorv2

分享给朋友:
您可能感兴趣的文章:
随机阅读: