Есть ли способ экспортировать константы по умолчанию 2?

Question

Есть ли способ экспортировать константы по умолчанию 2?

1

Примечание. Я начинаю изучать React Native. У меня есть два js файла (Inputs.js и Styles.js), и я пытаюсь поместить их в const в мой основной файл js (App.js), но я могу только export default один из них. Есть ли способ экспортировать оба из них или я должен изменить порядок кода другим способом?

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 для ошибки: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) 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'
   }
})

user1049876 20 июль 2017, в 00:23

Источник

0

Почему бы вам просто не экспортировать оба, но без default ? тогда вы можете импортировать затем так: import { Style, Inputs } from './constant';
Antoine Grandchamp 19 июль 2017, в 21:41
0

@AntoineGrandchamp Итак, вы говорите, что я должен создать js-файл с именем константы, а затем каким-то образом объединить файлы Style и Inputs?
user1049876 19 июль 2017, в 21:45
0

Извините, я думаю, что неправильно понял ваш вопрос. Посмотрите на ответ @Tomasz Bubala, это должно быть то, что вам нужно
Antoine Grandchamp 19 июль 2017, в 21:48
0

@AntoineGrandchamp Я рассмотрел ответ @Tomasz Bubała, но получил ошибку: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Я пытался спросить человека, который написал ответ, но этот человек в настоящее время не в сети.
user1049876 19 июль 2017, в 22:20
0

Это означает, что реагировать нечего. Можете ли вы добавить файл, куда вы импортируете App.js и обновить код в вопросе?
Antoine Grandchamp 19 июль 2017, в 22:25
0

@AntoineGrandchamp Я только что добавил обновленный код
user1049876 19 июль 2017, в 22:44
0

Можете ли вы добавить файл, где вы называете App.js?
Antoine Grandchamp 19 июль 2017, в 22:47
0

@ AntoineGrandchamp Это там. Это прямо под текстом, который гласит «ОБНОВЛЕНО НИЖЕ»
user1049876 19 июль 2017, в 22:48
0

@ AntoineGrandchamp Может быть, я неправильно понял ваш вопрос. Что вы имеете в виду файл, где я называю App.js? Я вызываю App.js вверху каждого файла js.
user1049876 19 июль 2017, в 22:49
1

какой смысл импортировать их в app.js, если вы собираетесь их экспортировать? где ты их используешь?
Matt Aft 19 июль 2017, в 22:51
0

@ Matt Aft Вы правы, я вычеркнул их из своего кода и все еще получаю ту же ошибку.
user1049876 19 июль 2017, в 22:54
0

@ user1049876 теперь, как и где ты импортируешь эти? Вы можете опубликовать этот код?
Matt Aft 19 июль 2017, в 22:55
0

@MattAft Я не понимаю твой вопрос. На какой импорт вы ссылаетесь? Я разместил весь код, который я использую для этого приложения.
user1049876 19 июль 2017, в 22:57
0

я думаю, что вы удалили не ту вещь, если вы удалите часть module.exports, ошибка исчезнет?
Matt Aft 19 июль 2017, в 22:59
0

@MattAft Если я вернусь к тому, что у меня было до редактирования, ошибок не было. Когда я закомментирую этот код и у меня нет ничего в файле App.js, кроме двух строк импорта, я получаю эту ошибку.
user1049876 19 июль 2017, в 23:01
0

Я думаю, что ваша ошибка в том, что вы не регистрируете свой основной компонент. Взгляните на этот урок . Вы увидите, что вам нужен компонент, обертывающий ваше приложение, и вам нужно зарегистрировать этот компонент (последняя строка кода в примере)
Antoine Grandchamp 19 июль 2017, в 23:03
0

@ AntoineGrandchamp Вы имеете в виду линию AppRegistry?
user1049876 19 июль 2017, в 23:05
0

@ user1049876 Да
Antoine Grandchamp 19 июль 2017, в 23:06
0

@ AntoineGrandchamp Я все еще получаю ту же ошибку. Я добавил строку AppRegistry.registerComponent('SimpleVersion', () => App); в конец файла App.js
user1049876 19 июль 2017, в 23:07
0

Вы создали компонент под названием App и ваше приложение называется SimpleVersion ?
Antoine Grandchamp 19 июль 2017, в 23:11
0

@ AntoineGrandchamp У меня нет никаких компонентов в приложении, js, поэтому я выбрал App
user1049876 19 июль 2017, в 23:13
0

Давайте продолжим эту дискуссию в чате .
Antoine Grandchamp 19 июль 2017, в 23:14

Показать ещё 20 комментариев

Теги:

javascript

react-native

expo

ios

3 ответа

0

У вас может быть только один экспорт по умолчанию и столько экспорта, сколько вам нужно:

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

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

export default Home1;

И затем импортируйте его следующим образом:

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

krankuba 19 июль 2017, в 19:19

0

Я получаю только файл Style.js для отображения в моем приложении. Я использовал метод импорта, который вы используете в файлах Style.js и Inputs.js, и вставил первый набор кода, который вы дали в файле App.js. Я делаю что-то неправильно?
user1049876 19 июль 2017, в 22:12
0

Вы можете заменить свой компонент, который не отображается, чем-то вроде одного заголовка или абзаца, чтобы увидеть, хорошо ли он отображается в первую очередь. Затем, после его появления, вы можете вернуть свой код и продолжить расследование;)
krankuba 19 июль 2017, в 22:25
0

Почему вы делаете это в App.js, а не просто <Style /> <Inputs />
krankuba 19 июль 2017, в 22:39

Показать ещё 1 комментарий

0

Вы можете использовать module.exports в этом случае для экспорта объекта двумя способами. Использование:

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

Это часть вашего файла под названием App.js, поэтому, чтобы импортировать его в другой файл, вам необходимо:

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

В этом случае вы используете named export. Чтобы правильно импортировать его, вам явно нужно использовать import { Home1, Home2 } где Home1 и Home2 являются соответствующими именами экспортируемых функций.

Tomasz Bubała 19 июль 2017, в 19:04

0

Я получил ошибку: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Возможно, я получил эту ошибку, потому что я поместил неверную информацию в каждый из двух методов. Я поставил то же самое, что и раньше, с return и <Style /> или <Inputs />
user1049876 19 июль 2017, в 21:49
0

Даже с изменениями, которые вы включили в ответ, я все равно получаю ту же ошибку.
user1049876 19 июль 2017, в 21:53
0

проверить отредактированное решение
Tomasz Bubała 20 июль 2017, в 21:26

Показать ещё 1 комментарий

Ещё вопросы

Почему бы вам просто не экспортировать оба, но без default ? тогда вы можете импортировать затем так: import { Style, Inputs } from './constant';
@AntoineGrandchamp Итак, вы говорите, что я должен создать js-файл с именем константы, а затем каким-то образом объединить файлы Style и Inputs?
Извините, я думаю, что неправильно понял ваш вопрос. Посмотрите на ответ @Tomasz Bubala, это должно быть то, что вам нужно
@AntoineGrandchamp Я рассмотрел ответ @Tomasz Bubała, но получил ошибку: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Я пытался спросить человека, который написал ответ, но этот человек в настоящее время не в сети.
Это означает, что реагировать нечего. Можете ли вы добавить файл, куда вы импортируете App.js и обновить код в вопросе?
@AntoineGrandchamp Я только что добавил обновленный код
Можете ли вы добавить файл, где вы называете App.js?
@ AntoineGrandchamp Это там. Это прямо под текстом, который гласит «ОБНОВЛЕНО НИЖЕ»
@ AntoineGrandchamp Может быть, я неправильно понял ваш вопрос. Что вы имеете в виду файл, где я называю App.js? Я вызываю App.js вверху каждого файла js.
какой смысл импортировать их в app.js, если вы собираетесь их экспортировать? где ты их используешь?
@ Matt Aft Вы правы, я вычеркнул их из своего кода и все еще получаю ту же ошибку.
@ user1049876 теперь, как и где ты импортируешь эти? Вы можете опубликовать этот код?
@MattAft Я не понимаю твой вопрос. На какой импорт вы ссылаетесь? Я разместил весь код, который я использую для этого приложения.
я думаю, что вы удалили не ту вещь, если вы удалите часть module.exports, ошибка исчезнет?
@MattAft Если я вернусь к тому, что у меня было до редактирования, ошибок не было. Когда я закомментирую этот код и у меня нет ничего в файле App.js, кроме двух строк импорта, я получаю эту ошибку.
Я думаю, что ваша ошибка в том, что вы не регистрируете свой основной компонент. Взгляните на этот урок . Вы увидите, что вам нужен компонент, обертывающий ваше приложение, и вам нужно зарегистрировать этот компонент (последняя строка кода в примере)
@ AntoineGrandchamp Вы имеете в виду линию AppRegistry?
@ AntoineGrandchamp Я все еще получаю ту же ошибку. Я добавил строку AppRegistry.registerComponent('SimpleVersion', () => App); в конец файла App.js
Вы создали компонент под названием App и ваше приложение называется SimpleVersion ?
@ AntoineGrandchamp У меня нет никаких компонентов в приложении, js, поэтому я выбрал App
Давайте продолжим эту дискуссию в чате .
Я получаю только файл Style.js для отображения в моем приложении. Я использовал метод импорта, который вы используете в файлах Style.js и Inputs.js, и вставил первый набор кода, который вы дали в файле App.js. Я делаю что-то неправильно?
Вы можете заменить свой компонент, который не отображается, чем-то вроде одного заголовка или абзаца, чтобы увидеть, хорошо ли он отображается в первую очередь. Затем, после его появления, вы можете вернуть свой код и продолжить расследование;)
Почему вы делаете это в App.js, а не просто <Style /> <Inputs />
Я получил ошибку: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Возможно, я получил эту ошибку, потому что я поместил неверную информацию в каждый из двух методов. Я поставил то же самое, что и раньше, с return и <Style /> или <Inputs />
Даже с изменениями, которые вы включили в ответ, я все равно получаю ту же ошибку.
проверить отредактированное решение

user1049876 · Accepted Answer · 2017-07-19T21-03-00.000Z

Создайте компонент, такой как код, показанный ниже, который работает, и показывает файлы 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>
        )
    }
}