Каков самый простой способ использования материального дизайна в приложении iOS для реагирования?

Ответ 1

Я работаю над react-native-material-ui, который должен быть близок к material-ui.

Нам нужно было иметь возможность полностью и очень легко изменить стиль/тему приложения. И нет библиотеки, которая предоставляет такую ​​возможность. Конечно, вы можете установить пару вещей через опоры компонента. Но вы должны изменить его на каждом месте вашего кода, где вы используете этот компонент.

В react-native-material-ui

• вы можете определить объект, который будет объединен со стилями по умолчанию и использовать всюду в вашем приложении - очень просто
• есть возможность изменить стиль только одного компонента через реквизиты
• или вы можете использовать свой стиль даже в своих собственных компонентах (через контекст).

Ответ 2

Я считаю, что эта библиотека 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,
  },

Я получил этот пример кода из библиотеки, которую я поделил в своей ссылке. Вы также заметите, что в этой библиотеке нет настраиваемых компонентов, просто стилей.

Ответ 3

Я использую response-native-material-ui и объединяю его с хранилищем Redux. Таким образом, я могу переключать тему на лету!

К сожалению, изначально мы должны определять стили для каждого элемента управления, так как соединитель "ThemeProviders uiTheme" для action-native-material-ui кажется односторонним.

В любом случае, если все подключено, я могу управлять всеми моими стилями в одном большом файле styles.js, состоящим всего из одного запроса Platform.OS, нескольких скинов и изменения полных тем с помощью выпадающего действия, приводящего к действиям/изменениям состояния, готовым к сохранить в локальном постоянном хранилище.

реакция-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 !
              }}
              />

Ответ 4

Вот еще... http://mrn.js.org/

который также доступен здесь... https://github.com/binggg/mrn

Выглядит неплохо, хотя я еще не использовал его. Что конкретно вы видите, отсутствует у других?