web-dev-qa-db-ja.com

React Native？

私は次の方法で私のスタイルを分離しています：

styles /
|-- base.js
|-- base.ios.js
|-- base.Android.js

これらはそれぞれ、この例のように作成されたStyleSheetコンポーネントをエクスポートします。

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    statusBar: {
    height: 20
});

それらをマージして、基本スタイルオブジェクトを1つだけにするにはどうすればよいですか？私は次のようなものを探しています：

const baseStyles = mergeStyles(baseStyle, platformStyle);
reactjsmergestylesreact-native
11
R01010010

あなたはとても近いです：

const baseStyles = [baseStyle, platformStyle];

基本的に、どのコンポーネントも次のようにスタイルをカスケードできます。

<View style={[styles.style1,styles.style2]}></View>
18
Tarek

スプレッド演算子 '...'を使用してスタイルシートを組み合わせることができます。同じ名前の変数は最後のインスタンスによって上書きされることに注意してください。

デモ用の小さなデモアプリを次に示します。

'use strict';
import React, { Component } from 'react';
import {
   Alert,
   Button,
   StyleSheet,
   Text,
   AppRegistry,
   View,
 } from 'react-native';

class listTest extends Component {

render() {
  return (

   <View style={styles3.myViewBox}>
      <Text style = {styles3.myTextBox1}>
        TEST
      </Text>
    </View>
   );
  }
 }

const styles = StyleSheet.create({
  myTextBox1: {
     backgroundColor:'red',
  },
  myViewBox: {
    backgroundColor:'blue',
    margin:15,
    padding:15,
  }

});

const styles2 = StyleSheet.create({
  myTextBox2: {
    backgroundColor:'yellow',
  },
  myViewBox: {
    backgroundColor:'green',
    margin:15,
    padding:15,
  },
});

const styles3 = {...styles,...styles2};

AppRegistry.registerComponent('listTest', () => listTest);

編集：

ES5を実行している場合は、次のように使用できます。

const styles3 = Object.assign（styles、styles2）;

6
Momentus Mitch

StyleSheet.flattenメソッドを使用することもできます。ドキュメントを参照 here 。

var styles = StyleSheet.create({
  listItem: {
    flex: 1,
    fontSize: 16,
    color: 'white',
  },
  selectedListItem: {
    color: 'green',
  },
});

StyleSheet.flatten([styles.listItem, styles.selectedListItem]);
// returns { flex: 1, fontSize: 16, color: 'green' }
1
bhdrk