Question

我想创建一个返回类似于React Navigation的组件的函数：

const AppNavigator = StackNavigator({
    Room: { screen: RoomContainer },
    Game: { 
        screen: GameContainer,
        navigationOptions: {
            gesturesEnabled: false
        }
    },
    Catalog: { screen: CatalogContainer }
}, {
        headerMode: 'none',
        mode: 'modal'
    })

Which you can then use like:

<AppNavigator />

我看了他们的代码，但仍然有点困惑。这是我的简单例子。

import onboardingCreator from 'this-package'

export default class App extends Component {
  render() {
    let Onboard = onboardingCreator({
      test: 'cool'
    })

    console.log("OB", Onboard)


    return (
      <Onboard />
    );
  }
}

然后在另一个文件中：

export default (props) => {
    console.log("PROPS", props)

    return <View style={{backgroundColor: 'green', flex: 1}} />
}

我哪里错了？我只需要一个简单的例子就可以让我朝着正确的方向前进：）

感谢。

Answer 1

问题是您的函数返回组件的实例，而不是组件类的定义。如果你想渲染实例（函数现在的工作方式），它看起来会更像这样：

import onboardingCreator from 'this-package'

export default class App extends Component {
  render() {
    let onboard = onboardingCreator({
      test: 'cool'
    })

    console.log("OB", onboard)


    return <div>{onboard}</div>;
  }
}

另一方面，如果您想创建一个新组件并将其返回，它看起来会更像这样：

export default (props) => {
    console.log("PROPS", props)

    class GeneratedComponent extends Component {
        render() {
            return <View
                {...props}
                style={{backgroundColor: 'green', flex: 1}}
            />;
        }
    }

    return GeneratedComponent;
}

在React

1 个答案: