admin管理员组

文章数量:1291027

Note: I am a beginner learning React Native. I have two js files (Inputs.js and Styles.js) and I am trying to put them both in a const in my main js file (App.js) but I can only export default one of them. Is there a way I can export both of them or should I rearrange my code in another way?

App.js:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const Home1 = () => {
   return (
      <Style/>
   )
}
const Home2 = () =>{
   return (
      <Inputs />
   )
}

export default Home1; //I am unable to export both Home1 and Home2 here

Style.js:

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native'

const Style = () => {
    return ( <View style = {styles.container}>
         <Text style = {styles.text}>
            <Text style = {styles.capitalLetter}>
               Title Here
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}{"\n"}Location: </Text>
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}Time:</Text>
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}Time: </Text>
            </Text>
         </Text>
      </View>
   )
}

export default Style

const styles = StyleSheet.create ({
   container: {
      //alignItems: 'center',
      marginTop: 50,
   },

   text: {
      color: '#41cdf4',
   },

   capitalLetter: {
      color: 'red',
      fontSize: 20
   },

   textInput: {
      padding: 22,
      //fontWeight: 'bold',
      color: 'black'
   },


   textShadow: {
      textShadowColor: 'red',
      textShadowOffset: { width: 2, height: 2 },
      textShadowRadius : 5
   }
})

Inputs.js:

import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'

class Inputs extends Component {

   state = {
      email: '',
      password: ''
   }

   handleEmail = (text) => {
      this.setState({ email: text })
   }

   handlePassword = (text) => {
      this.setState({ password: text })
   }

   login = (email, pass) => {
      alert('email: ' + email + ' password: ' + pass)
   }

   render(){
      return (
         <View style = {styles.container}>
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Email"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handleEmail}/>

            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Password"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handlePassword}/>

            <TouchableOpacity
               style = {styles.submitButton}
               onPress = { () => this.login(this.state.email, this.state.password)}>
               <Text style = {styles.submitButtonText}>
                  Submit
               </Text>
            </TouchableOpacity>
         </View>
      )
   }
}

export default Inputs

const styles = StyleSheet.create({
   container: {
      paddingTop: 200
   },

   input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },

   submitButton: {
      backgroundColor: '#7a42f4',
      padding: 10,
      margin: 15,
      height: 40,
   },

   submitButtonText:{
      color: 'white'
   }
})

****UPDATED CODE BELOW for the error: Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: object.:*****

App.js:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

module.exports = { 
  Home1() {
    return (
      <Style/>
    );
  }, 
  Home2() {
    return (
      <Inputs/>
    );
  } 
};

Style.js

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native'
import { Inputs } from "./App.js"
import Home1, {Home2} from './App.js'

const Style = () => {
    return ( <View style = {styles.container}>
         <Text style = {styles.text}>
            <Text style = {styles.capitalLetter}>
               Title Here
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}{"\n"}Your address or location (eg, Nashville, TN): </Text>
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}Contact 2:</Text>
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}Contact 3: </Text>
            </Text>
         </Text>
      </View>
   )
}

export default Style

const styles = StyleSheet.create ({
   container: {
      //alignItems: 'center',
      marginTop: 50,
   },

   text: {
      color: '#41cdf4',
   },

   capitalLetter: {
      color: 'red',
      fontSize: 20
   },

   textInput: {
      padding: 22,
      //fontWeight: 'bold',
      color: 'black'
   },


   textShadow: {
      textShadowColor: 'red',
      textShadowOffset: { width: 2, height: 2 },
      textShadowRadius : 5
   }
})

Inputs.js

import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
//import { Style } from "./App.js"
import Home1, {Home2} from './App.js'

class Inputs extends Component {

   state = {
      email: '',
      password: ''
   }

   handleEmail = (text) => {
      this.setState({ Location: text })
   }

   handlePassword = (text) => {
      this.setState({ Time: text })
   }

   login = (email, time1) => {
      alert('Location: ' + email  + ' Time: ' + time1)
   }

   render(){
      return (
         <View style = {styles.container}>
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Location"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handleEmail}/>

            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Time"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handlePassword}/>

            <TouchableOpacity
               style = {styles.submitButton}
               onPress = { () => this.login(this.state.email, this.state.password)}>
               <Text style = {styles.submitButtonText}>
                  Submit
               </Text>
            </TouchableOpacity>
         </View>
      )
   }
}

export default Inputs

const styles = StyleSheet.create({
   container: {
      paddingTop: 200
   },

   input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },

   submitButton: {
      backgroundColor: '#7a42f4',
      padding: 10,
      margin: 15,
      height: 40,
   },

   submitButtonText:{
      color: 'white'
   }
})

Note: I am a beginner learning React Native. I have two js files (Inputs.js and Styles.js) and I am trying to put them both in a const in my main js file (App.js) but I can only export default one of them. Is there a way I can export both of them or should I rearrange my code in another way?

App.js:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const Home1 = () => {
   return (
      <Style/>
   )
}
const Home2 = () =>{
   return (
      <Inputs />
   )
}

export default Home1; //I am unable to export both Home1 and Home2 here

Style.js:

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native'

const Style = () => {
    return ( <View style = {styles.container}>
         <Text style = {styles.text}>
            <Text style = {styles.capitalLetter}>
               Title Here
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}{"\n"}Location: </Text>
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}Time:</Text>
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}Time: </Text>
            </Text>
         </Text>
      </View>
   )
}

export default Style

const styles = StyleSheet.create ({
   container: {
      //alignItems: 'center',
      marginTop: 50,
   },

   text: {
      color: '#41cdf4',
   },

   capitalLetter: {
      color: 'red',
      fontSize: 20
   },

   textInput: {
      padding: 22,
      //fontWeight: 'bold',
      color: 'black'
   },


   textShadow: {
      textShadowColor: 'red',
      textShadowOffset: { width: 2, height: 2 },
      textShadowRadius : 5
   }
})

Inputs.js:

import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'

class Inputs extends Component {

   state = {
      email: '',
      password: ''
   }

   handleEmail = (text) => {
      this.setState({ email: text })
   }

   handlePassword = (text) => {
      this.setState({ password: text })
   }

   login = (email, pass) => {
      alert('email: ' + email + ' password: ' + pass)
   }

   render(){
      return (
         <View style = {styles.container}>
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Email"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handleEmail}/>

            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Password"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handlePassword}/>

            <TouchableOpacity
               style = {styles.submitButton}
               onPress = { () => this.login(this.state.email, this.state.password)}>
               <Text style = {styles.submitButtonText}>
                  Submit
               </Text>
            </TouchableOpacity>
         </View>
      )
   }
}

export default Inputs

const styles = StyleSheet.create({
   container: {
      paddingTop: 200
   },

   input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },

   submitButton: {
      backgroundColor: '#7a42f4',
      padding: 10,
      margin: 15,
      height: 40,
   },

   submitButtonText:{
      color: 'white'
   }
})

****UPDATED CODE BELOW for the error: Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: object.:*****

App.js:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

module.exports = { 
  Home1() {
    return (
      <Style/>
    );
  }, 
  Home2() {
    return (
      <Inputs/>
    );
  } 
};

Style.js

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native'
import { Inputs } from "./App.js"
import Home1, {Home2} from './App.js'

const Style = () => {
    return ( <View style = {styles.container}>
         <Text style = {styles.text}>
            <Text style = {styles.capitalLetter}>
               Title Here
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}{"\n"}Your address or location (eg, Nashville, TN): </Text>
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}Contact 2:</Text>
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}Contact 3: </Text>
            </Text>
         </Text>
      </View>
   )
}

export default Style

const styles = StyleSheet.create ({
   container: {
      //alignItems: 'center',
      marginTop: 50,
   },

   text: {
      color: '#41cdf4',
   },

   capitalLetter: {
      color: 'red',
      fontSize: 20
   },

   textInput: {
      padding: 22,
      //fontWeight: 'bold',
      color: 'black'
   },


   textShadow: {
      textShadowColor: 'red',
      textShadowOffset: { width: 2, height: 2 },
      textShadowRadius : 5
   }
})

Inputs.js

import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
//import { Style } from "./App.js"
import Home1, {Home2} from './App.js'

class Inputs extends Component {

   state = {
      email: '',
      password: ''
   }

   handleEmail = (text) => {
      this.setState({ Location: text })
   }

   handlePassword = (text) => {
      this.setState({ Time: text })
   }

   login = (email, time1) => {
      alert('Location: ' + email  + ' Time: ' + time1)
   }

   render(){
      return (
         <View style = {styles.container}>
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Location"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handleEmail}/>

            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Time"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handlePassword}/>

            <TouchableOpacity
               style = {styles.submitButton}
               onPress = { () => this.login(this.state.email, this.state.password)}>
               <Text style = {styles.submitButtonText}>
                  Submit
               </Text>
            </TouchableOpacity>
         </View>
      )
   }
}

export default Inputs

const styles = StyleSheet.create({
   container: {
      paddingTop: 200
   },

   input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },

   submitButton: {
      backgroundColor: '#7a42f4',
      padding: 10,
      margin: 15,
      height: 40,
   },

   submitButtonText:{
      color: 'white'
   }
})
  • javascript
  • ios
  • react-native
  • expo
Share Improve this question edited Jul 19, 2017 at 22:55 user1049876 asked Jul 19, 2017 at 21:27 user1049876user1049876 1172 gold badges3 silver badges18 bronze badges 22
  • Why don't you just export both, but without default ? then you could import then like this : import { Style, Inputs } from './constant'; – Antoine Grandchamp Commented Jul 19, 2017 at 21:41
  • @AntoineGrandchamp So are you saying I should make a js file called constant and then somehow bine both the Style and Inputs files? – user1049876 Commented Jul 19, 2017 at 21:45
  • Sorry, I think I misunderstood your question. Take a look at @Tomasz Bubala answer, it should be what you need – Antoine Grandchamp Commented Jul 19, 2017 at 21:48
  • @AntoineGrandchamp I have reviewed the answer by @Tomasz Bubała but I received an error: Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: object. I tried asking the person who wrote the answer, but that person is currently offline. – user1049876 Commented Jul 19, 2017 at 22:20
  • 1 whats the point in importing them into app.js if you're just going to export them? where are you using these? – Matt Aft Commented Jul 19, 2017 at 22:51
 |  Show 17 more ments

4 Answers 4

Reset to default 4

You could use module.exports in this case to export an object with two methods. Usage: 

export function Home1() {
  return (
    <Style/>
  );
};
export function Home2() {
  return (
    <Inputs/>
  );
};

This is part of your file called App.js, so in order to import it in another file you need to:

import { Home1, Home2 } from "./App.js"

In this case you are using named export. In order to import it properly you explicitly need to use import { Home1, Home2 } with Home1 and Home2 being corresponding names of exported functions.

You can have just one default export and as many exports as you need:

const Home1 = () => { 
  return <Style/>
} 

export const Home2 = () => { 
  return <Inputs />
} 

export default Home1;

And then import it like this:

import Home1, {Home2} from './App'

You can export const, but only one default const.

import React from 'react';

export const myCon1 = (
  // your code goes here
 );

export const myCon2 = (
  // your code goes here
 );

in Other side you can import

import { myCon1 , myCon2} from '/path_to_file';

Create a ponent like the code that is shown below, which works, and shows both the Style.js and the Inputs.js files in the app:

import React, {Component} from 'react';
import { StyleSheet, Text, View, AppRegistry } from 'react-native';
import Style from './Style.js';
import Inputs from './Inputs.js';

export default class App extends Component {
    render() {
        return (
        <View> 
        <Style/> // here, both the Style and Inputs files can be used
        <Inputs/> 
        </View>
        )
    }
}

本文标签： javascriptIs there a way to export default 2 constantsStack Overflow

版权声明：本文标题：javascript - Is there a way to export default 2 constants? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741508632a2382471.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。