22

我在 Github 上发现这些部分实现是领先的竞争者，尽管它们还有很长的路要走：

他们目前缺少一些我想使用的组件。是否有我缺少的替代解决方案？

4

4 回答 4

20

我们最近在 Callstack 上发布了 React Native Paper：https ://reactnativepaper.com/

一些亮点包括：

  • 遵循最新的材料设计指南
  • 不错的主题 API，可让您动态切换主题
  • 默认可访问
  • 支持 RTL 模式
  • 适用于 Android 和 iOS，包括 Expo

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

以下是一些截图：

按钮文本输入晶圆厂

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

于 2018-03-15T17:26:16.473 回答
16

我正在研究react-native-material-ui，它应该接近于material-ui。

我们需要能够完全且非常轻松地更改应用程序的样式/主题。并且没有提供这种可能性的库。当然，你可以通过组件的 props 设置一些东西。但是您必须在代码中使用该组件的每个位置更改它。

在react-native-material-ui 中

  • 您可以定义将与默认样式合并并在您的应用程序中随处使用的对象 - 非常简单
  • 仍然有可能通过 props 只改变一个组件的样式
  • 或者您甚至可以在自己的组件中使用您的样式（通过上下文）
于 2016-09-14T21:05:02.047 回答
8

我相信xinthink的这个库会实现你所追求的。

我在 Android 和 iOS 上都使用它。

不过老实说，所有这些库只是给你一些风格，你也可以自己写。

例如，您可以像这样创建一个材料设计卡：

       <ScrollView style={styles.scrollView}>
          <View style={styles.cardContainer}>
            <View style={styles.card}>
              <View resizeMode="cover" style={styles.cardTitleContainer}>
                <Text style={styles.cardTitle}>Commented on</Text>
              </View>
              <View  // TextView padding not handled well on Android https://github.com/facebook/react-native/issues/3233
                style={{
                  padding : 15,
                }}
                >
                <Text style={styles.cardContent}>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Mauris sagittis pellentesque lacus eleifend lacinia...
                </Text>
              </View>
              <View style={styles.cardAction}>
                <Text>My Action</Text>
              </View>
            </View>
          </View>
        </ScrollView>

使用以下样式：

  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,
  },

我从我在链接中共享的库中获得了这个示例代码。您还会注意到这个库中也没有自定义组件，只有样式。

于 2016-04-23T09:13:54.023 回答
2

我正在使用 react-native-material-ui 并将其与 Redux 商店结合使用。这样我就可以动态切换主题！

不幸的是，最初我们必须为每个控件定义样式，因为 react-native-material-ui 的“ThemeProviders uiTheme 连接器”似乎是一种单向票。

无论如何，如果一切都连接好，我可以在一个大的 style.js 中管理我的所有样式，仅包含一个 Platform.OS 查询、多个皮肤和通过下拉更改完整主题导致操作/状态更改，准备保存在一个本地持久存储。

react-native-material-ui 看起来很酷。

<ActionButton
              actions={[
                  { icon: 'email', label: 'Email' },
                  { icon: 'phone', label: 'Phone' },
                  { icon: 'sms', label: 'Text' },
                  { icon: 'favorite', label: 'Favorite' },
              ]}
              //not defined
              //hidden={this.state.bottomHidden}
              icon="share"
              transition="speedDial"
              onPress={(action) => {
                  if (myPlatform === 'android') {
                      ToastAndroid.show(action, ToastAndroid.SHORT);
                  }
              } }
              style={{
                  positionContainer: { bottom: 76 },
                  container: myStyle.testBack, //<--DYNAMIC !
              }}
              />
于 2017-01-26T01:37:14.623 回答