导出和导入可观察的 MobX React Native
Export and import observable MobX React Native
我是 React Native 的新手,也是 MobX 的新手,当我的第一个项目需要在文件之间动态更新和更改 props/store 时才意识到我需要它。
这里是项目的github:https://github.com/Kovah101/GenreGeneratorv1
我正在尝试构建一个生成随机音乐流派名称的应用程序。
我的主文件呈现所有组件并有一个小 console.log 来检查是否正在生成随机数。我在这里没有收到任何错误
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;
接下来,GenerateButton 呈现一个带有 onClick
事件的按钮,该事件生成一个随机数数组,这些由 mainOriginal
检查并正常工作。我还使用 MobX 使 randomNumbers
可观察,因为它不断更新并将传递到最终文件 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 应该使用随机数数组将它们映射到 3 个不同流派数组的大小,然后渲染 3 个框,每个框包含每个数组中的一种随机流派。但是,如果我将它设置为 'var' 并且在“get randomGenres”中再次设置相同,我会在 'chosenRandoms' 处得到意想不到的标记,我的理解是它们需要是某种东西。
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
,那么我会在数学操作行的末尾得到一个错误。我一定是在滥用某些东西。感谢您的帮助,我可以提供更多我的代码,但我认为问题不在样式表或索引中。
所以我决定将所有计算和流派选择放在 generatebutton
中,并将数组作为道具从按钮发送到 mainOriginal
,然后返回到 genreselector
。
不必使用 MobX 或任何过于复杂的东西。
这里是最终代码:github.com/Kovah101/GenreGeneratorv2
我是 React Native 的新手,也是 MobX 的新手,当我的第一个项目需要在文件之间动态更新和更改 props/store 时才意识到我需要它。
这里是项目的github:https://github.com/Kovah101/GenreGeneratorv1
我正在尝试构建一个生成随机音乐流派名称的应用程序。 我的主文件呈现所有组件并有一个小 console.log 来检查是否正在生成随机数。我在这里没有收到任何错误
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;
接下来,GenerateButton 呈现一个带有 onClick
事件的按钮,该事件生成一个随机数数组,这些由 mainOriginal
检查并正常工作。我还使用 MobX 使 randomNumbers
可观察,因为它不断更新并将传递到最终文件 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 应该使用随机数数组将它们映射到 3 个不同流派数组的大小,然后渲染 3 个框,每个框包含每个数组中的一种随机流派。但是,如果我将它设置为 'var' 并且在“get randomGenres”中再次设置相同,我会在 'chosenRandoms' 处得到意想不到的标记,我的理解是它们需要是某种东西。
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
,那么我会在数学操作行的末尾得到一个错误。我一定是在滥用某些东西。感谢您的帮助,我可以提供更多我的代码,但我认为问题不在样式表或索引中。
所以我决定将所有计算和流派选择放在 generatebutton
中,并将数组作为道具从按钮发送到 mainOriginal
,然后返回到 genreselector
。
不必使用 MobX 或任何过于复杂的东西。
这里是最终代码:github.com/Kovah101/GenreGeneratorv2