将多个组件导入 index.ios.js答案

【问题标题】：Importing multilpe components to index.ios.js将多个组件导入 index.ios.js
【发布时间】：2017-03-25 23:16:53
【问题描述】：

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

【问题讨论】：

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

【解决方案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 表示您希望最初呈现哪个组件。

【讨论】：