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

Question

是否有可能使用 React Native 开发一个应用程序，它在 iOS 和 Android 中具有非常明显的 UI/UX，同时实现一个共同的业务层来管理 API的，本地数据等等？目标是提供一种外观和感觉，最大限度地遵循 Apple 和 Google 的设计指南，以便用户从每个生态系统中获得最原生的体验。我知道可以编写特定于每个平台的代码 (https://facebook.github.io/react-native/releases/next/docs/platform-specific-code.html)，但我见过的所有示例应用程序都具有相同的外观和感觉，所以很难知道这种方法是否真的可行，或者是否对于主要差异，它没有意义，因为它最终会产生太多重复代码。

Answer 1

您可以根据应用运行所在的任何平台有条件地在 react-native 中呈现某些元素。我建议按照您提供的 link 进行操作，但是一个超级简单的方法是做这样的事情

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

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

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

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

Answer 2

注意事项

业务逻辑将在容器上。
Components/Views 将有道具和回调来处理来自容器的数据。
使用基于功能的架构。
避免在类不需要的地方使用生命周期方法。

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

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

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

关注丹的 Presentational Components

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

有关 smart/dumb Components

的更多信息

Answer 3

您可以为 ios 和 android 定义不同的组件。例如：

ExampleComponent.android.js 
ExampleComponent.ios.js

然后将它们作为

导入您的视图

import ExampleComponent from './ExampleComponent';

否则在视图中您可以检查平台并呈现不同的 UI。例如：

渲染（）{ return( {Platform.OS === 'android' ?对于 android UI} {Platform.OS === 'ios' ?对于 ios UI} ); }

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

Can I have separate front-end layers for iOS and Android using React Native

frontend

user-experience

react-native