Question

我想基于react-native-config

的配置变量显示App的根组件

我想实现这样的目标。我在.env文件中有一个IS_STORYBOOK变量，我想设置我的环境，以便我可以从config设置值，然后在我的本机应用程序中切换到主应用程序和情节提要模式。

通过这种方式。.我收到此错误bundling failed: SyntaxError: D:\Projects\React\React-Native Sample app\MobileApp\App.js: 'import' and 'export' may only appear at the top level (62:1)

// App.js

import React from 'react'; // eslint-disable-line
import { Provider } from 'react-redux';
import { pushNotifications } from './src/global/services';
import configureStore from './src/store/configureStore';
import {StackNavigator, createDrawerNavigator } from 'react-navigation'
import { generateStack } from './src/navigation/routesBuilder'
import Drawer from './src/components/drawer/container'
import {items} from './src/components/drawer/draweritems';
import DrawerIcon from './src/components/navIcons/drawerIcon'
import {data} from './src/global/data'
import {scale} from './src/utils/scale'
import StoryBook from './storybook';
import Config from 'react-native-config'

const store = configureStore();
pushNotifications.configure();
data.populateData();
const drawerRoutes = {"app.home":{
    screen:generateStack("app.home", "Home", true,true)
}}
for(var i=0; i<items.length; i++){
    drawerRoutes[items[i].navigateTo] = {
        screen : generateStack(items[i].navigateTo, items[i].title, true, true),
    }
}

const RootStack = StackNavigator({
    Splash: {
        screen: generateStack('app.splash', '', false, false),
        navigationOptions:{
            header: null
        }
    },
    Auth: {
        screen : generateStack('auth.login', '', false, false),
        navigationOptions:{
            header: null
        }
    },
    Home:{
        screen : createDrawerNavigator({
            ...drawerRoutes
        },
        {
            drawerOpenRoute: 'DrawerOpen',
            drawerCloseRoute: 'DrawerClose',
            drawerToggleRoute: 'DrawerToggle',
            drawerPosition:'left',
            drawerWidth:scale(300),
            drawerIcon : (<DrawerIcon />),
            contentComponent: (props) => <Drawer {...props}/>
        }),

    }
}, {
    headerMode:
    'none'
});

export default class App extends React.Component {
    render() {
        if(Config.IS_STORYBOOK){
            return <StoryBoard />
        } else {
            return(
                <Provider store={store}>
                    <RootStack />
                </Provider>
            )
        }
    }
}

// storybook.js

import { AppRegistry } from "react-native";
import { getStorybookUI, configure } from "@storybook/react-native";
import { loadStories } from "./storyLoader";

configure(() => {
    loadStories();
}, module);

const StorybookUI = getStorybookUI({
    port: 7007,
    host: "localhost",
    onDeviceUI: true,
    resetStorybook: true
});

AppRegistry.registerComponent("sampleproject", () => StorybookUI);

export { StorybookUI as default };

// .env

IS_STORYBOOK=false

Answer 1

反应组件在构建时捆绑在一起，而不是在运行时捆绑。

您不能有条件地导出或导入组件。相反，您应该有条件地在组件中渲染内容。

类似的事情可能对您有用

import StoryBook from './storybook';

export default class App extends React.Component {
  render() {
    if(!Config.IS_STORYBOOK){
      return(
        <Provider store={store}>
          <RootStack />
        </Provider>
      )
    } else {
      return <StoryBook />
    }
  }
}

基于.env config变量的渲染基础组件

1 个答案: