Javascript 有没有办法导出默认的2个常量？

注：我是一个初学者，以英语为母语。我有两个js文件（Inputs.js和Styles.js），我试图将它们都放在主js文件（App.js）的

常量中，但我只能
导出其中一个默认值。是否有一种方法可以同时导出这两种代码，还是应该以另一种方式重新排列代码

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

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
   }
})

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'
   }
})

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
   }
})

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'
   }
})

import React，{Component}来自'React'；
从“react native”导入{视图、文本、图像、样式表}
从“/App.js”导入{Inputs}
从“/App.js”导入Home1，{Home2}
常量样式=（）=>{
报税表（
标题在这里
{“\n”}{“\n”}{\n}您的地址或位置（如田纳西州纳什维尔）：
{“\n”}{“\n”}联系人2：
{“\n”}{“\n”}联系人3：
)
}
导出默认样式
const styles=StyleSheet.create({
容器：{
//对齐项目：“居中”，
玛金托普：50，
},
正文：{
颜色：“#41cdf4”，
},
capitalLetter：{
颜色：“红色”，
尺寸：20
},
文本输入：{
填充：22，
//fontWeight:'粗体'，
颜色：“黑色”
},
文本阴影：{
textShadowColor:'红色'，
textShadowOffset:{宽度：2，高度：2}，
文本阴影半径：5
}
})

Inputs.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
   }
})

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'
   }
})

import React，{Component}来自“React”
从“react native”导入{View，Text，TouchableOpacity，TextInput，StyleSheet}
//从“/App.js”导入{Style}
从“/App.js”导入Home1，{Home2}
类输入扩展组件{
状态={
电子邮件：“”，
密码：“”
}
handleEmail=（文本）=>{
this.setState（{Location:text}）
}
handlePassword=（文本）=>{
this.setState（{Time:text}）
}
登录=（电子邮件，时间1）=>{
警报（'位置：'+电子邮件+'时间：'+时间1）
}
render（）{
返回(
this.login（this.state.email，this.state.password）}>
提交
)
}
}
导出默认输入
const styles=StyleSheet.create({
容器：{
加油站：200
},
输入：{
差额：15，
身高：40，
边框颜色：“#7a42f4”，
边框宽度：1
},
提交按钮：{
背景颜色：“#7a42f4”，
填充：10，
差额：15，
身高：40，
},
submitButtonText：{
颜色：“白色”
}
})
在本例中，您可以使用
模块.exports
使用两种方法导出对象。用法：

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

在本例中，您使用的是命名导出。为了正确地导入它，您需要显式地使用
import{Home1，Home2}
，Home1和Home2是导出函数的对应名称
 您可以只使用一个默认导出和所需的任意多个导出：

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

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

export default Home1;

创建一个组件，如下图所示，它可以工作，并显示应用程序中的Style.js和Inputs.js文件：

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>
        )
    }
}

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图、AppRegistry}；
从“./Style.js”导入样式；
从“/Inputs.js”导入输入；
导出默认类应用程序扩展组件{
render（）{
返回(
//在这里，可以使用样式和输入文件
)
}
}
您可以导出常量，但只能导出一个默认常量

import React from 'react';

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

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

在另一边你可以导入

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

为什么不同时导出这两个文件，而不导出默认值？然后您可以这样导入：
import{Style，Inputs}来自'/constant'
@AntoineGrandchamp那么你是说我应该创建一个名为constant的js文件，然后以某种方式将样式和输入文件结合起来？对不起，我想我误解了你的问题。看看@Tomasz Bubala的答案，它应该是你想要的need@AntoineGrandchamp我已经审阅了@Tomasz Bubała的答案，但是我收到了一个错误：
元素类型无效：应该是字符串（对于内置组件）或类/函数（对于复合组件），但得到了：object。
我试着问写答案的人，但此人目前处于脱机状态。如果您只是想将其导出，那么将其导入app.js有什么意义？您在哪里使用这些？我遇到了一个错误：
元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到了：object。
可能是因为我在两个方法中的每个方法中都放错了信息。我把和以前一样的东西放在了return中，甚至是你在答案中所做的编辑，我仍然会得到同样的错误。我只是让Style.js文件显示在我的应用程序中。我在Style.js和Inputs.js文件中使用了导入方法，并在App.js文件中输入了您给出的第一组代码。我做错什么了吗？你可以用一个标题或段落之类的东西来替换没有显示的组件，看看它是否首先呈现得很好。然后，在它出现之后，您可以将代码放回原处并进一步调查；）为什么要在App.js中执行此操作，而不仅仅是