当前位置:  开发笔记 > Android > 正文

在反应原生iOS应用程序中使用材质设计的最简单方法是什么?

如何解决《在反应原生iOS应用程序中使用材质设计的最简单方法是什么?》经验,为你挑选了3个好方法。

我已经在Github上找到了这些部分实现作为主要的竞争者,尽管他们还有很长的路要走:

反应天然材料,试剂盒

反应天然材料设计

他们目前缺乏一些我想要使用的组件.是否有一种我缺少的替代解决方案?



1> 小智..:

我正在研究react-native-material-ui,它应该接近材料-ui.

我们需要选择完全且非常容易地更改应用程序的样式/主题.并没有提供这种可能性的库.当然,你可以通过组件的道具设置几件事.但是您必须在代码中使用该组件的每个位置更改它.

在react-native-material-ui中

您可以定义将与默认样式合并的对象,并在您的应用程序中随处使用 - 非常简单

仍然有可能通过道具改变一个组件的风格

或者你甚至可以在你自己的组件中使用你的风格(通过上下文)


请您必须说您是解决方案的维护者,请在这里解释:p

2> satya164..:

我们最近在Callstack上发布了React Native Paper:https://callstack.github.io/react-native-paper

一些亮点包括:

遵循最新的材料设计指南

很好的主题API,允许您动态切换主题

默认情况下可访问

支持RTL模式

适用于Android和iOS,包括Expo

我们的底部导航组件也有React Navigation的官方集成.

以下是一些截图:

按键的TextInputFAB

不确定你缺少哪些组件.所以不确定这是否满足您的需求.



3> SudoPlz..:

我相信xinthink的这个库将实现你所追求的目标.

我在Android和iOS上都使用它.

说实话,所有这些图书馆只能给你一些风格,你也可以自己写.

例如,你可以像这样创建一个材料设计卡:

       
          
            
              
                Commented on
              
              
                
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Mauris sagittis pellentesque lacus eleifend lacinia...
                
              
              
                My Action
              
            
          
        

使用以下样式:

  cardContainer:{
    flex: 1,
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
    padding: 20,
    marginTop: self.props.device.platform === 'android' ? 56 : 0,
  },

  card:{
    flex: 1,
    backgroundColor: '#ffffff',
    borderRadius: 2,
    borderColor: '#ffffff',
    borderWidth: 1,
    shadowColor: 'rgba(0, 0, 0, 0.12)',
    shadowOpacity: 0.8,
    shadowRadius: 2,
    shadowOffset: {
      height: 1,
      width: 2,
    },
  },
  cardTitleContainer:{
    flex: 1,
    height: 170,
  },
  cardTitle:{
    position: 'absolute',
    top: 120,
    left: 26,
    backgroundColor: 'transparent',
    padding: 16,
    fontSize: 24,
    color: '#000000',
    fontWeight: 'bold',
  },

  cardContent:{
    padding:0,
    color: 'rgba(0, 0, 0, 0.54)',
  },

  cardAction:{
    borderStyle: 'solid',
    borderTopColor: 'rgba(0, 0, 0, 0.1)',
    borderTopWidth: 1,
    padding: 15,
  },

我从我在链接中共享的库中获取了此示例代码.您还会注意到此库中没有自定义组件,只是样式.

推荐阅读
kikokikolove
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有