我已经在Github上找到了这些部分实现作为主要的竞争者,尽管他们还有很长的路要走:
反应天然材料,试剂盒
反应天然材料设计
他们目前缺乏一些我想要使用的组件.是否有一种我缺少的替代解决方案?
我正在研究react-native-material-ui,它应该接近材料-ui.
我们需要选择完全且非常容易地更改应用程序的样式/主题.并没有提供这种可能性的库.当然,你可以通过组件的道具设置几件事.但是您必须在代码中使用该组件的每个位置更改它.
在react-native-material-ui中
您可以定义将与默认样式合并的对象,并在您的应用程序中随处使用 - 非常简单
仍然有可能通过道具改变一个组件的风格
或者你甚至可以在你自己的组件中使用你的风格(通过上下文)
我们最近在Callstack上发布了React Native Paper:https://callstack.github.io/react-native-paper
一些亮点包括:
遵循最新的材料设计指南
很好的主题API,允许您动态切换主题
默认情况下可访问
支持RTL模式
适用于Android和iOS,包括Expo
我们的底部导航组件也有React Navigation的官方集成.
以下是一些截图:
不确定你缺少哪些组件.所以不确定这是否满足您的需求.
我相信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, },
我从我在链接中共享的库中获取了此示例代码.您还会注意到此库中没有自定义组件,只是样式.