将Multilpe组件导入index.ios.js

Question

I'm trying to import my navigation (with routing) and my main.js to index.ios.js as such:

import PRSNT_demo from './src/main.js'
import NavAllDay from './src/components/navigation.js';

This just renders the last named Component (so only shows my navigation), I couldn't find anything on the subject and I've tried importing the nav into my main.js . Does anyone have documentation on where to find the solution or does anyone know the solution?

Navigation.js (I know this won't really do anything yet I just want it to show both views):

 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);

Answer 1

AppRegistry.registerComponent('PRSNT_demo', () => PRSNT_demo); this line should only exist in you index.ios.js and index.android.js file.

Also, to import files you just place these at the top of the file you want to use them:

import PRSNT_demo from './src/main.js'

import NavAllDay from './src/components/navigation.js'

if you wanted to use them in your index.ios.js file you need to do something like this:

    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);

The AppRegistry is saying which component you want initially rendered.