我对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却没有。
index.ios.js
main.js
任何帮助深表感谢!
所以我已经解决了这个问题。似乎React NativeBase不允许您将该<Content>部分放在主要组件之外。像这样的作品:
<Content>
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);
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>标签。
<Text>