我可以使用React Native为iOS和Android设置单独的前端层

Is it possible to develop an app using React Native that have a very distinct UI/UX in iOS vs Android while at the same time achieving a common business layer to manage API's, local data, etc.? The goal would be to provide a look & feel that maximizes the design guidelines from Apple and Google so users get the most native experience from each ecosystem. I know it is possible to write code that is specific to each platform (https://facebook.github.io/react-native/releases/next/docs/platform-specific-code.html) but all the example apps that I've seen have the same look and feel so it's hard to know if this approach is really feasible or if for major differences it doesn't make sense because it ends up in too much duplicate code.

是否有可能使用React Native开发一个应用程序,该应用程序在iOS和Android中具有非常独特的UI / UX,同时实现了管理API,本地数据等的公共业务层?我们的目标是提供外观和感觉,最大化Apple和Google的设计指南,以便用户从每个生态系统中获得最原生的体验。我知道可以编写特定于每个平台的代码(https://facebook.github.io/react-native/releases/next/docs/platform-specific-code.html)但是我可以编写所有示例应用程序已经看到有相同的外观和感觉因此很难知道这种方法是否真的可行,或者如果出现重大差异则没有意义,因为它最终导致了太多重复的代码。

3 个解决方案

#1

Things to note

注意事项

Business logic will be on containers.

业务逻辑将在容器上。

Components/Views will be have props and callbacks to process data from containers.

组件/视图将具有处理来自容器的数据的道具和回调。

Use a feature based architecture.

使用基于功能的体系结构。

Avoid using life cycle methods in classes where it's not needed.

避免在不需要的类中使用生命周期方法。

You can follow the smart /dumb component architecture where the smart containers deals with the business logic while the dumb ones takes care of presentation.

您可以遵循智能/哑组件架构,其中智能容器处理业务逻辑,而愚蠢的容器负责演示。

Follow : http://redux.js.org/docs/basics/UsageWithReact.html

请关注:http://redux.js.org/docs/basics/UsageWithReact.html

You can separate the containers as container.js and containerview.js for better separation.

您可以将容器分隔为container.js和containerview.js以便更好地分离。

Follow Dan's Presentational Components

关注Dan的演示组件

For iOS and Android separation u can use index.ios.js and index.android.js in each folder where each one is a view component.

对于iOS和Android分离,您可以在每个文件夹中使用index.ios.js和index.android.js,其中每个文件夹都是一个视图组件。

Additional info on smart/dumb Components

关于智能/哑组件的其他信息

#2

You can conditionally render some elements in react-native based on whichever platform the app is running on. Id recommend following the link you provided, but a super simple way would be to do something like this

您可以根据运行应用程序的任何平台有条件地呈现react-native中的一些元素。我建议您按照您提供的链接,但一个非常简单的方法是做这样的事情

render(){
    if(Platform.OS === 'android'){
        return(
           <View><Text>Android</Text></View>
        )
    };

    if(Platform.OS === 'ios'){
        return(
           <View><Text>IOS</Text></View>
        )
    };
}

Occassionally i use this method if i want to follow platform specific design guidelines, for example different looking buttons and/or text. Or even lower level things like color, shadow offset and fonts.

偶尔我会使用这种方法,如果我想遵循平台特定的设计指南,例如不同的外观按钮和/或文本。甚至更低级别的东西,如颜色,阴影偏移和字体。

I'd only use this on very low level components however, as over-using it could lead to alot of duplicate code. Haven't done this for navigation as of yet, and i assume this is what you are asking the question for.

我只会在非常低级别的组件上使用它,因为过度使用它可能会导致很多重复的代码。到目前为止还没有做过导航,我认为这就是你要问的问题。

#3

You can define different components for ios and android. For eg:

您可以为ios和android定义不同的组件。例如:
```
ExampleComponent.android.js 
ExampleComponent.ios.js
```
then import them in your view as

然后在您的视图中导入它们
```
import ExampleComponent from './ExampleComponent';
```
Or else inside view you can check the platform and render different UIs. For eg:

或者在视图中,您可以检查平台并呈现不同的UI。例如:

render(){ return( {Platform.OS === 'android' ? for android UI} {Platform.OS === 'ios' ? for ios UI} ); }

render(){return({Platform.OS ==='android'?for android UI} {Platform.OS ==='ios'?for ios UI}); }

#1