React NativeBase没有显示我导入的组件
React NativeBase not showing my imported components
我是React和React Native的新手,我正在玩React NativeBase。
我已经设法在一个文件中获得以下工作,但现在我只是试图将我的代码拆分为单独文件中的多个组件。
问题是,我导入的组件没有显示。我已经为此挣扎了一段时间了,我看不出我做错了什么……可能是一些非常愚蠢的事情。
下面是我的代码:代码/index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import {
Container,
Title,
Header,
} from 'native-base';
import MainContent from './main';
class AwesomeNativeBase extends Component {
render() {
return (
<Container>
<Header>
<Title>My awesome app</Title>
</Header>
<MainContent />
</Container>
);
}
}
AppRegistry.registerComponent('AwesomeNativeBase', () => AwesomeNativeBase);
代码/main.js
import React from 'react';
import { Text } from 'react-native';
import { Content } from 'native-base';
export default class MainContent extends React.Component {
render() {
return (
<Content>
<Text>Oh hello there!</Text>
</Content>
);
}
}
我正在使用:
rnpm link
react-native run-ios
所以只是为了澄清,index.ios.js
中的代码显示良好,标题显示在iPhone模拟器中,然而,main.js
中的文本没有。
任何帮助都非常感谢!
NativeBase Container目前主要接受Header
、Content
和Footer
。
NativeBase Content反过来接受React Native的Image, View和ScrollView,而不是任何其他自定义组件。
谢谢你提醒我。
我的团队会把解决方案反馈给你。
所以我已经找到了问题…似乎React NativeBase不允许你在主组件之外有<Content>
部分。如下所示:
代码/index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import {
Container,
Title,
Header,
Content,
} from 'native-base';
import MainContent from './main';
class AwesomeNativeBase extends Component {
render() {
return (
<Container>
<Header>
<Title>My awesome app</Title>
</Header>
<Content>
<MainContent />
</Content>
</Container>
);
}
}
AppRegistry.registerComponent('AwesomeNativeBase', () => AwesomeNativeBase);
代码/main.js
import React from 'react';
import { Text } from 'react-native';
export default class MainContent extends React.Component {
render() {
return (
<Text>Oh hello there!</Text>
);
}
}
所以现在如果你注意到,我只有<Text>
标签在我的main.js
,而不是<Content>
标签…不太确定为什么这有很大的不同,但很高兴知道!
相关文章:
- Angular2将组件方法导入到另一个组件中
- 如何基于依赖性导入React组件
- webpack样式加载器-在react组件上导入不同的样式,而无需重写
- React ES6 导入无状态组件
- 如何将 React 组件正确存储在单独的文件中并导入 React
- Ionic 2-导入/注入Angular 2 HTTP组件
- 在ES6中导入用于服务器端渲染的组件
- React.js导入和使用组件
- 从react引导程序导入组件
- ReactJS-Can't导入组件
- 如何在laravel 5.3 + VueJs路由中导入外部组件
- 在react native项目中导入我自己的组件失败了
- React NativeBase没有显示我导入的组件
- 第三方Vue组件在导入时抛出意外的令牌错误
- 为什么我不能把enum导入我的angular2组件?
- 如何在Angular 2中访问导入组件中的数据
- 不能在React组件中导入ES6模块
- 如何关注导入的React组件中的元素?
- 可以在所有容器组件中导入所有操作创建器
- 如何在React中导入组件特定的css样式