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

Question

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

Answer 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 正在说明您最初想要呈现哪个组件。

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

Importing multilpe components to index.ios.js

javascript

import

url-routing

hybrid

react-native