我尝试将导航(带路由)和我的main.js
导入index.ios.js
,原因如下:
import PRSNT_demo from './src/main.js'
import NavAllDay from './src/components/navigation.js';
这只是呈现最后一个命名的组件(因此只显示我的导航),我无法找到关于该主题的任何内容,并且我已尝试将nav
导入我的main.js
。有没有人有关于在何处找到解决方案的文档,或者有人知道解决方案吗?
Navigation.js
(我知道这确实做了什么,但我只想让它显示两种观点):
import React, { Component } from 'react';
import { AppRegistry, Text, Navigator, TouchableHighlight } from 'react-native';
import Style from '../Style';
console.log('doing this');
export default class NavAllDay extends Component {
render() {
const routes = [
{title: 'First Scene', index: 0},
{title: 'Second Scene', index: 1},
];
return (
<Navigator
style={Style.header}
initialRoute={routes[0]}
renderScene={(route, navigator) =>
<TouchableHighlight onPress={() => {
if (route.index === 0) {
navigator.push(routes[1]);
} else {
navigator.pop();
}
}}>
<Text>Hello {route.title}!</Text>
</TouchableHighlight>
}
navigationBar={
<Navigator.NavigationBar
routeMapper={{
LeftButton: (route, navigator, index, navState) =>
{
if (route.index === 0) {
return null;
} else {
return (
<TouchableHighlight onPress={() => navigator.pop()}>
<Text>Back</Text>
</TouchableHighlight>
);
}
},
RightButton: (route, navigator, index, navState) =>
{
if (route.index === 1) {
return null;
} else {
return (
<TouchableHighlight onPress={() => navigator.push(routes[1])}>
<Text>Done</Text>
</TouchableHighlight>
);
}
},
Title: (route, navigator, index, navState) =>
{ return (<Text>Awesome Nav Bar</Text>); },
}}
style={Style.header}
/>
}
/>
);
}
}
AppRegistry.registerComponent('PRSNT_demo', () => NavAllDay)
Main.js:
import React, { Component } from 'react';
import Style from './Style';
import {
AppRegistry,
Text,
View
} from 'react-native';
export default class PRSNT_demo extends Component {
render() {
return (
<View style={Style.container}>
<View style={Style.invites}>
<Text style={Style.presentListText}> Section</Text>
</View>
<View style={Style.presentList}>
<Text style={Style.presentListText}>
List
</Text>
</View>
</View>
);
}
}
AppRegistry.registerComponent('PRSNT_demo', () => PRSNT_demo);
答案 0 :(得分:1)
AppRegistry.registerComponent('PRSNT_demo', () => PRSNT_demo);
此行应仅存在于index.ios.js和index.android.js文件中。
此外,要导入文件,只需将它们放在要使用它们的文件的顶部:
import PRSNT_demo from './src/main.js'
import NavAllDay from './src/components/navigation.js'
如果您想在index.ios.js文件中使用它们,您需要执行以下操作:
import React, { Component } from 'react';
import {
AppRegistry,
View
} from 'react-native';
import PRSNT_demo from './src/main.js'
import NavAllDay from './src/components/navigation.js'
export default class Main extends Component {
render() {
return (
<View>
<PRSNT_demo />
<NavAllDay />
</View>
)
}
}
AppRegistry.registerComponent('PRSNT_demo', () => Main);
AppRegistry正在说明您最初要呈现的组件。