web-dev-qa-db-ja.com

反応ネイティブiOSアプリでマテリアルデザインを使用する最も簡単な方法は何ですか？

方法はありますが、Githubでこれらの部分的な実装を主要な候補として見つけました。

現時点では、利用したいコンポーネントが不足しています。私が見逃している代替ソリューションはありますか？

material-designreact-nativematerial-ui
19
David Handel

私は react-native-material-ui に取り組んでいます。これは material-ui に近いはずです。

アプリケーションのスタイル/テーマを完全かつ非常に簡単に変更するオプションが必要でした。そして、その可能性を提供するライブラリはありません。もちろん、コンポーネントの小道具を介していくつかのことを設定できます。ただし、そのコンポーネントを使用するコード内のすべての場所で変更する必要があります。

In react-native-material-ui

  • デフォルトのスタイルとマージされるオブジェクトを定義し、アプリのあらゆる場所で使用できます-非常に簡単
  • 小道具を介して1つのコンポーネントのみのスタイルを変更する可能性がまだあります
  • または、独自のコンポーネントでもスタイルを使用できます（コンテキスト経由）
16
xotahal

最近リリースされたReact Callstackのネイティブペーパー： https://callstack.github.io/react-native-paper

いくつかのハイライトは次のとおりです。

  • 最新の材料設計ガイドラインに準拠
  • テーマを動的に切り替えることができる素敵なテーマAPI
  • デフォルトでアクセス可能
  • RTLモードをサポート
  • Expoを含むAndroidとiOSの両方で動作します

React Bottom Navigationコンポーネントのナビゲーションの公式統合もあります。

スクリーンショットは次のとおりです。

Button（TextInput（FAB

不足しているコンポーネントがわからない。したがって、これがニーズを満たしているかどうかはわかりません。

15
satya164

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

リンクで共有したライブラリからこのサンプルコードを取得しました。また、このライブラリにはカスタムコンポーネントも存在せず、スタイルのみが存在します。

8
SudoPlz

私はreact-native-material-uiを使用しており、それをReduxストアと組み合わせています。このようにして、テーマを即座に切り替えることができます！

残念ながら、最初はコントロールごとにスタイルを定義する必要があります。react-native-material-uiの「ThemeProviders uiThemeコネクタ」は片道チケットのようです。

とにかく、すべてが接続されている場合、1つの大きなstyles.jsですべてのスタイルを管理できます。1つの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 !
              }}
              />
2
user7471869