2

我正在开发一个针对不同类型用户的应用程序。我想在同一个 repo 中为每个具有相同逻辑的变体构建不同的 UI、不同的测试用例。假设我有 3 种用户(X,Y,Z)所以我想实现这样的,index.X.js, index.Y.js ,index.Z.js. 如果没有变体文件,它应该回退到 default index.js。因此,当我想为 X 类型的用户构建应用程序时,我可以使用所有.X.js文件构建应用程序。

我已经浏览了以下两个包https://github.com/wix/react-native-repackagerhttps://github.com/elsassph/webpack-require-variant。仅特定版本的 react-native 支持第一个包,我不确定是否会因为使用这些(在 CI 中运行、运行测试用例、热重载等)而遇到任何问题。

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

4

1 回答 1

0

您可以通过条件渲染而不是扩展来实现相同的目的。只需渲染与您的条件匹配的相应组件。这里 User1、User2、User3 是组件。

文件扩展名用于特定于平台的代码。iosandroid喜欢index.ios.jsindex.andoid.js

https://facebook.github.io/react-native/docs/platform-specific-code.html

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与用户各自设计。

于 2018-03-09T13:42:08.553 回答