如何将现有的非React - Native - Component JS导入/请求到React Native组件
在React Native中，要将现有的非React Native组件导入或请求到React Native组件，可以按照以下步骤进行操作：
- 确保你的React Native项目已经设置好并且可以正常运行。
- 首先，将非React Native组件的JavaScript文件复制到你的React Native项目的合适位置。可以将其放在项目的根目录或者一个单独的文件夹中。
- 然后，在你的React Native组件中，使用
import语句导入非React Native组件的JavaScript文件。例如，如果你将文件放在根目录下的MyComponent.js中，可以使用以下代码导入：
import MyComponent from './MyComponent';- 接下来，你可以在React Native组件中使用导入的非React Native组件。根据非React Native组件的具体功能和用途，你可能需要在React Native组件中进行一些适配或调整。
- 最后，将React Native组件集成到你的应用中。你可以在适当的位置使用导入的非React Native组件，就像使用任何其他React Native组件一样。
需要注意的是，导入的非React Native组件的JavaScript文件应该是与React Native兼容的，即它们应该使用React Native支持的JavaScript语法和API。如果非React Native组件依赖于浏览器特定的功能或API，可能需要进行一些适配或替换。
对于React Native开发，腾讯云提供了一系列相关产品和服务，例如：
- 腾讯云移动开发平台：提供了丰富的移动开发工具和服务，包括移动应用开发框架、移动测试工具、移动推送服务等。
- 腾讯云云开发：提供了一站式后端云服务，包括云函数、数据库、存储、托管等，方便开发者快速构建和部署React Native应用。
以上是关于如何将现有的非React Native组件导入/请求到React Native组件的基本步骤和腾讯云相关产品的介绍。如果有具体的非React Native组件或其他问题，欢迎进一步提问。
相关·内容
我想在导航var上显示右按钮，但是没有呈现。请给我解决办法或一些建议。
错误
ExceptionsManager.js:73警告:不能在现有状态转换期间更新(例如在render或其他组件的构造函数中)。呈现方法应该是道具和状态的纯函数；构造器副作用是一种反模式，但可以移动到componentWillMount。
环境
"react": "16.0.0-alpha.12",
"react-native": "0.47.1",
"react-native-router-flux"
浏览 3提问于2017-08-15得票数 0
这是Package.Json文件，下面是我正在使用的包版本
"dependencies": {
"@expo/vector-icons": "^9.0.0",
"expo": "^32.0.6",
"native-base": "2.8.1",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-nativ
浏览 0提问于2019-02-26得票数 0
当前行为
使用react-native-tab-view v1.0.0时，出现错误：
Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, o
浏览 36提问于2018-08-31得票数 4
大家好，我是新来的反应，我刚开始学习。
我正在尝试react native，我已经研究过它，现在我正在尝试学习它，这是我在这方面的第一天，
我刚刚创建了react本机项目，并在创建js中创建了一个js文件和写入视图，并导入到index.android.jd中，但它显示了默认视图
以下是代码
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Comp
浏览 7提问于2017-07-14得票数 0
元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但got:未定义。检查“NavigatorIOS”的呈现方法。
这是我的密码
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
import React, {
AppRegistry,
StyleSheet,
NavigatorIOS,
View,
Text,
} from 'react-native';
var Dashboa
浏览 2提问于2016-03-07得票数 3
1回答
我是新来的反应本地人。当我在Android模拟器上运行项目时，会显示这个错误。我尝试了许多解决方案，但都没有奏效。
错误日志：
不变冲突:元素类型无效：
预期字符串(用于内置组件)或类/函数(用于组合组件)，但未定义。
LoginForm.js代码：
import React, {Component} from 'react';
import {View} from 'react-native';
import {Button,Card,CardSection} from './components'
class LoginForm
浏览 0提问于2018-04-24得票数 0
我试着在一个按钮上制作一个简单的动画，看看它是否工作，为此我使用了react-spring ，但出现了一个问题。
这就是我用来创建动画的方法：
import React from "react";
import { animated, Spring } from "react-spring/native";
import { Button } from "react-native";
const AnimatedButton = animated(Button);
class ThermoComponent extends React.Com
浏览 0提问于2020-07-31得票数 0
1回答
我正在使用react-native框架来开发我的小型安卓应用程序。我试图从Home.js重定向到Home.js--我运行了它，它在我的模拟器上显示了红色错误消息
index.android.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
import Home from 'App/Component/Home';
export default class mylApp extends Componen
浏览 2提问于2017-06-06得票数 0
回答已采纳
当我运行跨平台的js时，我得到了上面的错误。这有没有引起任何人的注意？下面是跨平台的js。而最后的代码片段是index.android.js
var React = require('react-native');
//import React from 'react';
var {
//import {
AppRegistry,
Component,
StyleSheet,
Text,
View
} = React;
//} from 'react-native';
var AwesomeProject = Rea
浏览 6提问于2016-07-15得票数 0
4回答
我跟随在我的反应本机项目中使用FloatingTitleTextInputField
下面是我的项目结构
这是我的HomeScreen.js代码
import React, {Component} from 'react';
import {Text, View, TextInput, StyleSheet} from 'react-native';
import FloatingTitleTextInputField from './customComponents/floating_title_text_input_field';
浏览 3提问于2019-09-24得票数 8
回答已采纳
我试图从放置在外部存储中的js文件中动态导入一个类组件，
sample.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
var HeaderComponent=eval(`class HeaderComponent extends Component {
constructor(props) {
super(props);
}
render() {
return <Text&
浏览 3提问于2020-06-29得票数 1
请允许我对本机做出反应，并且我正在开发一个关于snack.expo.io的项目，在我看来，它们似乎很好，但是我希望将一个js (component1.js)文件连接到父App.js文件，但是它总是给我带来这些错误。
设备：(1069:6932)安装模块‘/component1 1’失败:下载从App.js导入的组件‘~component1 1@最新’
这是我的App.js文件：
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Co
浏览 0提问于2018-02-23得票数 1
回答已采纳
2回答
我试图在我的react应用程序中打开一个不同的屏幕，但我得到了一个错误：
“路由‘配置文件’的组件必须是反应性组件。”
这是App.js文件：
import {StackNavigator} from 'react-navigation';
import {StyleSheet, View, Button, AppRegistry} from 'react-native';
import Profile from '../AwesomeProject';
export default class App
浏览 0提问于2018-04-22得票数 0
回答已采纳
1回答
我收到了一个错误:与世博一起构建的
将容器导入主文件app.js时出现故障
SignIn代码
import React, { Component } from 'react';
import LoginForm from '../components/LoginForm';
export default class SignIn extends Component {
render() {
return (
<View>
<Text>
浏览 0提问于2018-02-17得票数 0
回答已采纳
当我试图使用jest添加一个简单的单元测试时，我目前正面临着一个问题。它一直抛出TypeError:Component is not a function error，我无法修复它。有没有人之前遇到过同样的错误，或者有人有任何关于如何修复它的想法？真的很感谢！
我从jest得到的测试结果如下：
Using Jest CLI v11.0.2, jasmine2, babel-jest
Running 1 test suite...Warning: React.createElement: type should not be null, undefined, boolean, or number
浏览 0提问于2016-06-09得票数 4
1回答
redux-表单元素类型无效
、、、、
“元素类型无效”我仍然收到这个错误，不知道该怎么办。尝试了<form>和<Form>仍然是一样的。请帮助:这是我的组件，保存在：“./ AzForm.js /testComponent”
import React from 'react'
import { Provider } from 'react-redux'
import { Container, Content, Text, Form } from 'native-base';
//import { createStore } from 'redux&
浏览 1提问于2017-10-23得票数 0
反应-本机抛出这个奇怪的异常，即使代码似乎是准确的。我用的是反应本机0.48。
封装index.js和login.js源代码
Login.js
import React, { Component } from "react";
import {
AppRegistry,
Text,
View,
TouchableOpacity,
Label,
TextInput
} from "react-native";
import { StackNavigator } from "react-navigation";
class L
浏览 3提问于2017-09-28得票数 0
由于我刚开始接触react-native，我只是尝试在react-native中构建一个可以导航的简单应用程序。
index.js
import React from 'react';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import 'react-native-gesture-handler';
import {Navigatio
浏览 0提问于2020-02-20得票数 1
回答已采纳
2回答
我编写了这段代码，但是它不工作，并且有错误。
import React, {Component} from 'react';
import {Platform, StyleSheet, Text} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text st
浏览 1提问于2020-03-08得票数 2
回答已采纳
我正在建立一个狗收养应用程序，我有它的设置有三个主要的屏幕。(主页，搜索页面，和个人资料页。使用Map的文档是基于在App.js文件上构建地图视图的，但我希望将它放在另一个屏幕上。
到目前为止，这是我的App.js文件：
import { StatusBar } from 'expo-status-bar';
import { ImageBackground, StyleSheet, Text, Image, View, Button, TouchableOpacity, Alert, Dimensions } from 'react-native';
impo
浏览 4提问于2022-11-23得票数 0
我从ReactNative开始，并尝试获取一个可以导航到的组件以及内联使用。
MyComp是组件。在家里，我尝试通过一个按钮导航到MyComp，并让它内联。
App.js
import React from 'react';
import { StyleSheet, Text, View, Button, Alert, Image} from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import Home
浏览 2提问于2019-05-30得票数 0
回答已采纳
2回答
我刚开始响应本机，目前正在尝试创建一个名为OpButton的自定义组件。这只是一个按钮，以便我可以尝试导入和导出组件。然而，每次我试图导入它时，我都会收到诸如“不变违规”之类的错误，并且不知道如何修复它。
import React, { Component } from 'react';
import { Button, Alert } from 'react-native';
export default class OpButton extends Component {
render() {
return (
<Button
浏览 1提问于2018-09-20得票数 2
回答已采纳
我正在构建一个ReactNative + Redux应用程序，并使用ListView组件。
在_renderRow() of ListView中，我想返回自己的单元组件(称为JobDetailCell，它只从管理ListView的组件(称为JobsRootComponent)接收props中的数据)。
到目前为止，我想出了以下代码：
JobsRootComponent.js
import React, {
Component,
StyleSheet,
Text,
View,
ListView,
ActivityIndicatorIOS,
NavigatorIOS,
浏览 1提问于2016-03-30得票数 4
回答已采纳
2回答
我试图在一个React Native应用程序中为android和iOS使用一个单一的入口文件。
我遵循了一些教程，并得出了以下结论：
index.js
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class Main extends Component {
render() {
return (
<Text>Hello world! from both IOS and An
浏览 3提问于2017-08-03得票数 1
我在react-native中有项目，它是ok的，我的问题是当我尝试导入另一个组件时它失败了，但是当在index.android.js导入它时它ok为什么?？
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
ToastAndroid,
ListView,
Navigator,
} from 'react-nat
浏览 0提问于2016-11-28得票数 1
我使用的反应-本机-路由器-流量包的路由，这似乎是错误的。我也看到过其他类似的问题，但没有一种解决方案对我有效。
请帮帮我..。
这是我的密码：-
routes.js
import React from 'react';
import {Router, Stack, Scene} from 'react-native-router-flux';
import Login from './pages/login';
import Signup from './pages/signup';
class Routes extends
浏览 0提问于2018-11-30得票数 2
回答已采纳
1回答
我是个新手--土生土长。我目前正在尝试添加一个自定义按钮。每当我试图导入我创建的文件(或者我自己创建的任何文件)时，我总是会收到无法解决的错误。我看了很远很远，但我没有找到任何可行的解决办法。
相关信息: Npm版本: 6.14.13，React本地版本: 0.63.2，世博会版本: 4.5.2。
项目结构：
我所犯的错误：
Unable to resolve module ./components/custombutton.js from C:\Users\levik\Desktop\App\App\App.js:
None of these files exist:
* compo
浏览 0提问于2021-06-18得票数 1
回答已采纳
1回答
我是一个新的react-native框架，正在学习如何使用navigator。我尝试实现了两个应用页面之间的跳转。从“男孩”到“女孩”然后再回到“男孩”。以下是APP.js中的代码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component, } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image
浏览 1提问于2017-10-29得票数 0
为简单FlatList执行一个项目--我导入了npm i react-native-elements --save
npm i-保存反应本机矢量图标
然后我把它连在一起
反应.本机链接反应.本机矢量图标
App.js代码
import React, {Component} from 'react';
import {ScrollView, FlatList, View} from 'react-native';
import { List, ListItem} from 'react-native-elements';
export def
浏览 0提问于2019-05-03得票数 1
回答已采纳
我是第一次接触react-native，我正在尝试实现react-stack-navigator，但函数createStackNavigator返回null。我一直在遵循一个教程，在相同的代码中没有这个问题，任何想法都将不胜感激。下面是我的错误： ? 下面是我的代码： import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import { Home } from "
浏览 12提问于2020-01-15得票数 2
回答已采纳
Flatlist实现但数据呈现不正确
App.js
import React, {Component} from 'react';
import Main from './components/MainComponents';
import {Platform} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu'
浏览 1提问于2018-12-22得票数 4
回答已采纳
1回答
我的应用程序目前设置如下，当用户按下Hub时，我想显示Study屏幕
App.js
import React, { Component } from 'react';
...
import { View } from 'react-native'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './redux/reducers'
浏览 1提问于2021-05-04得票数 0
回答已采纳
我想使用堆叠路由器在本机反应导航包，但当我使用它时，我会得到这个错误。
元素类型无效:需要字符串(用于内置组件)或类/函数(用于组合组件)，但是got: object。D:\react-native\AwesomeProject\node_modules\react-native\Libraries\Renderer\ReactNativeStack-dev.js:1984:75 instantiateReactComponent instantiateChild
我的代码：
import React,{Component} from 'react'
import
浏览 3提问于2017-07-26得票数 0
我是react的初学者，我正在尝试从一个文件到另一个文件赋予样式值。
这是Square.js：
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Numbers from './Numbers';
export default class Square extends React.Component {
render() {
return (
<View style={squa
浏览 0提问于2018-10-17得票数 0
1回答
我有一个注册页面，有4个步骤(4个单独的屏幕)。在第一页上，用户在字段中输入他们的用户名，在第二页上输入显示名称，在第三天输入他们的生日，在第四页输入他们的密码。
以下是我当前注册的屏幕文件：
import React from 'react';
import { View, Text, Button } from 'react-native';
const SignupScreen = () => {
return (
<View>
<Text>First step</Text>
浏览 2提问于2022-10-07得票数 0
我看过类似的问题，但似乎没有一个解决方案对我有用，这已经困扰了我两天了。
这个错误似乎来自于将this.props.navigate传递给exerciseList.js，但是我尝试过的一切都不起作用。因此，任何建议都将不胜感激。当我通过exerciseList.js单击单独呈现的文件时，会发生错误。
错误消息：
undefined is not a function (evaluating '_this2.props.navigate('Exercises', { exerciseName:ex})')
package.json
"depend
浏览 0提问于2019-02-21得票数 0
回答已采纳
我刚把我的项目从39号更新到42个。该项目使用ReactiveNavigation4。在更新之前，一切正常，现在我得到了一个恼人的错误：
警告: React.createElement: type无效--需要一个字符串(用于内置组件)或一个类/函数(用于复合组件)，但got: undefined。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。
检查您在App.js:89的代码。
in (由ExpoRoot创建)
在ExpoRoot (at renderApplication.js:45)
在RCTView (at View.js:34)
在视图中(在AppCont
浏览 0提问于2021-08-20得票数 0
直到现在，它呈现，但没有打开抽屉。
我认为这与参考资料有关，但我不确定。
如果有人能帮我，那就太棒了。
router.js
import React, { Component } from 'react';
import { Actions, Router, Scene } from 'react-native-router-flux';
import Dashboard from './components/dashboard';
import Home from './components/home';
import Vie
浏览 1提问于2016-12-29得票数 2
回答已采纳
在使用从组件导入默认类时获取错误，我搜索此错误，但未解决解决方案，组件返回对象。
type is invalid -- expected a string (for built-in components) or a class/function (for composite components) 但got: object
错误：
12:19:03: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for comp
浏览 0提问于2018-08-31得票数 0
回答已采纳
我在react本机中实现了Stack，但是它显示了一个错误："TypeError:无法读取未定义的正确的‘导航’“。令人惊讶的是，这对于一个组件是有效的，但是当我在另一个组件中使用相同的代码时，它会显示上面的错误。
import React from "react";
import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } fr
浏览 2提问于2020-09-10得票数 0
回答已采纳
我看到了一些关于这个问题的帖子，我尝试了一些解决方案，但似乎都没有效果。我试着做错误信息所暗示的事情，但这并没有真正的帮助。
在到达这里之前，我收到了不同的错误信息。我希望他们中的一些人在这个问题解决后还会回来。
这是App.js
import React from 'react';
import { StackNavigator } from "react-navigation";
import { StyleSheet, Text, View } from 'react-native';
import MyScreen from '.
浏览 4提问于2017-11-01得票数 0
回答已采纳
我有一个名为Home的组件，其中包含以下代码： import React from 'react';
import Text from "react-native-web/dist/exports/Text";
export default function Home (props) {
return (
<Text>{props.message}</Text>
)
} 我将这个组件导入到App.js中，如下所示： import { StatusBar } from 'expo-status-b
浏览 21提问于2020-09-13得票数 0
回答已采纳
我是新的本机反应。我了解了组件的好处，嵌入外部styles.Now我正在尝试使用全局样式。我想在我的应用程序中使用相同样式的文本和按钮。
最好不要在每个组件中重复样式，我想在样式包下创建单独的text.js，button.js来定制视图样式。
这是我的项目结构。我想在我的index.js中导入text.js。
index.js
import { AppRegistry } from 'react-native';
import React, {Component} from 'react';
import {
Text
} from 'reac
浏览 1提问于2018-02-11得票数 1
遵循本教程
我在Hello World阶段得到以下错误：
2016-06-16 22:38:30.192 [error][tid:com.facebook.react.JavaScript] Super expression must either be null or a function, not undefined
2016-06-16 22:38:30.197 [fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: Super expression must either be
浏览 0提问于2016-06-17得票数 3
我正在研究react-native，并试图将react-navigation 集成到导航中。我在执行过程中遇到了一些困难。
index.android.js
**
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from "react";
import {
AppRegistry,
Image,
View,
Text,
Button,
StyleSheet
} from "react-native";
import
浏览 4提问于2017-04-18得票数 2
回答已采纳
我正在导入一个组件到我的react本地应用程序，即使在尝试了我已经在网上找到的解决方案之后，我仍然会得到相同的错误，所以我可能是个初学者，所以我错过了一些显而易见的东西
我试着用大括号包装我的导入名，但它似乎没有帮助
my main app.js
import React from 'react';
import { StyleSheet, View, Header, } from 'react-native';
import { NumberInput } from './src/components/NumberInput&#
浏览 0提问于2019-07-29得票数 2
我的代码，我不知道我的错误在哪里
警告: React.createElement: type无效--预期为字符串(用于内置组件)或类/函数(用于复合组件)，但得到：%s.%s%s %s，未定义，您可能忘记从定义在其中的文件导出组件，或者您可能混淆了默认导入和命名导入。
app.js
import React, { Component } from 'react';
import {
Navigator,
} from 'react-native';
import Movies from './Movies';
const RouteMap
浏览 4提问于2020-07-28得票数 1
我一直在重新调整我制作的应用程序的方法，开始使用类和更多面向对象的样式，并对页面使用单独的文件，而不仅仅是在主文件中敲击函数中的所有内容。 这是App.js import 'react-native-gesture-handler';
import React , {Component} from 'react';
import {Button, Text, View, SafeAreaView} from 'react-native';
import {NavigationContainer} from '@react-navigat
浏览 7提问于2020-10-24得票数 2
回答已采纳
我正在使用Redux和React Native来管理状态。我相信我已经成功地设置了商店和提供者。我可以从任何组件成功地使用store.getState()和store.dispatch(action())，但是，react-redux connect函数不允许我从子组件访问存储区。你能在下面的代码中发现任何错误吗？ Login.js -我正在测试的这个子组件不会通过react-redux connect访问redux store。 import React, {Component} from 'react';
import actions from '../../re
浏览 14提问于2020-01-05得票数 0
回答已采纳
1回答
我有一个登录组件如下所示，我正在为这个组件编写一些测试用例。当我试图运行测试时，我得到了以下错误：
测试
import renderer from 'react-test-renderer'
import Login from '../Login'
let props, wrapper
beforeEach(() => {
props = {
loginAttempt: jest.fn(),
recoverAttempt: jest.fn(),
reset: jest.fn()
}
wrapper = shallow
浏览 0提问于2018-12-21得票数 13
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
