관찰 가능 MobX React Native 내보내기 및 가져 오기

Question

React Native에 익숙하며 MobX를 처음 사용하는 사람은 처음이에요. 첫 번째 프로젝트에서 파일간에 동적으로 업데이트하고 변경하는 소품/저장소를 요구할 때만 필요했습니다. 나는 음악의 임의 장르의 이름을 생성하는 응용 프로그램을 구축을 위해 노력하고 https://github.com/Kovah101/GenreGeneratorv1

: 여기

는 프로젝트의 GitHub의입니다. 내 메인 파일은 모든 구성 요소를 렌더링하고 작은 console.log를 가지고 난수가 생성되는지 확인합니다. 나는 다음, GenerateButton은 임의의 숫자의 배열을 생성하는 onClick 이벤트와 버튼을 렌더링 여기

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; 

오류를 얻을하지 않습니다 이러한 mainOriginal에 의해 확인하고 제대로 작동 얻을. 또한 MobX를 사용하여 지속적으로 업데이트되고 genreSelector 최종 파일로 전달되므로 randomNumbers을 관찰 할 수 있습니다. 임의의 숫자는 3 개 개의 다른 장르의 배열의 크기에 매핑의

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는 각 배열에서 임의의 장르 중 하나와 3 상자, 각 렌더링, 배열을 사용해야합니다. 그러나 나는 'selectedRandoms'에서 예기치 않은 토큰을 얻습니다. 'var'와 'get randomGenres'에서 다시 동일한 것으로 설정하면 이해가됩니다.

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; 

아무도 내가 뭘 잘못하고 있는지 아이디어가 있습니까? 내가 var과 get을 꺼내면 수학 조작 줄 끝에서 오류가 발생합니다. 나는 뭔가를 오용해야합니다. 어떤 도움 주셔서 감사합니다, 내 코드의 더 제공 할 수 있지만 스타일 시트 또는 인덱스 문제가 있다고 생각하지 않습니다.

Answer 1

그래서 모든 계산과 장르 피킹을 generatebutton에 넣고 단추의 소품으로 배열을 mainOriginal으로 보낸 다음 genreselector으로 다시 보내기로 결정했습니다.

MobX 나 지나치게 복잡한 것은 사용하지 않아도됩니다. github.com/Kovah101/GenreGeneratorv2