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

时间:2016-10-31 15:21:34

标签: react-native

我是新手来反应原生,我无法将变量从一个文件传递到另一个文件。

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;

1 个答案:

答案 0 :(得分:6)

export {rNumbers};
export {Button};

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

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

然后像这样导入:

int x;

编辑:错误:预期{导出后。在

中添加