将multilpe组件导入index.ios.js

时间:2017-03-25 23:16:53

标签: javascript react-native import url-routing hybrid

我尝试将导航(带路由)和我的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);

1 个答案:

答案 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正在说明您最初要呈现的组件。