Question

我正在开发一个针对不同类型用户的应用程序。我想为同一个仓库中具有相同逻辑的每个变体构建不同的UI，不同的测试用例。让我们说如果我有3种用户（X，Y，Z）那么我想实现这样的目标，index.X.js, index.Y.js ,index.Z.js。如果没有变体文件，则应该回退到默认index.js。因此，当我想为X类型的用户构建应用程序时，我可以使用所有.X.js文件构建应用程序。

我已经查看了两个包https://github.com/wix/react-native-repackager和https://github.com/elsassph/webpack-require-variant。第一个软件包仅支持特定版本的react-native，我不确定我是否因为使用这些问题而遇到任何问题（在CI中运行，运行测试用例，热重新加载等）。

这个问题有没有标准解决方案？

Answer 1

您可以通过条件渲染而不是扩展来实现相同的目标。只需渲染符合条件的相应组件。这里User1，User2，User3是组件。

文件扩展名用于特定于平台的代码。 ios和android，例如index.ios.js和index.andoid.js

Dashboard

class Demo extends Component {
    render() {
        const users = ["user1","user2","user3"];
        let dynamicComponent;
        switch(users[1]) {
            case "user1":
                dynamicComponent = <User1/>;
            break;
            case "user2":
                dynamicComponent = <User1/>;
            break;
            case "user3":
                dynamicComponent = <User1/>;
            break;
        }
        return (
            <View>
                {dynamicComponent}
            </View>
        );
    }
}

这些组件可以是您与用户相应设计的整个APP。

使用自定义文件扩展名进行构建

1 个答案: