React native,从其他文件传递变量

Question

我是新来的反应本机,我无法将变量从一个文件传递到另一个文件.

module.exports在传递类时效果很好.但是,在本机中有什么方法可以通过导出将变量从文件传递到文件？

在下面的示例中,一个文件(按钮)正在创建一个随机数组,我想在另一个文件(genreSelector)中访问该数组.同样地,我试图从(流派到genreSelector)传递一个字符串数组.

我无法找到一个如何做到这一点的例子,所以我觉得这是不可能的.如果不可能,我应该如何传递信息？我是否需要在main中使用所有函数并在子类中调用它们,如果是这样,我如何引用父类的函数而不是它自己的this.function？

所以main在index.android.js中渲染,一切都很好.当然吧,数组从文件到文件的传递.我尝试使用状态,但仍然无法根据需要访问变量.

对这样一个基本问题的道歉是如此复杂的问题.

//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;

//这是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;

//这是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;

Answer 1

module.exports = rNumbers;
module.exports = Button;

你通过分配这样来覆盖它.你应该使用export关键字:

export {rNumbers};
export {Button};

然后导入如下:

import {rNumbers} from './button.js';
import {Button} from './button.js';

编辑:错误:预期{导出后.添加