web-dev-qa-db-ja.com

反応ネイティブで特定のコンポーネントのスタイル小道具を渡す方法

特定のスタイルのボタンを作成してみました。 justifyContent、alignItems、backgroundColor、heightなどの3つ以上のプロパティがありました。ボタンのbackgroundColorプロパティが変更されるように、別のコンポーネントからこれにスタイルを渡したいと思いました。

私のコード：

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ buttonName, csCode }) => {
  const { buttonStyle, textStyle } = styles;

  return (
    <TouchableOpacity style={{ buttonStyle, backgroundColor: [csCode] }}>
      <Text style={textStyle}>
      {buttonName}
      </Text>
    </TouchableOpacity>
  );
};

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#ffffff',
    fontSize: 35,
    fontWeight: '600',

  },
  buttonStyle: {
    justifyContent: 'center',
    alignSelf: 'stretch',
    height: '20%',
  }
};

export { Button };

ここでは、buttonStyleはボタンに適用されず、代わりにbackgroundColorプロパティのみが適用されます。何か助け？

ありがとう。

reactjsreact-nativestylesreact-props
9
Amirth

スタイルオブジェクトのスタイルとインラインスタイルを一緒に使用する場合は、次のような配列に配置してください。

<TouchableOpacity style={[buttonStyle, {backgroundColor: csCode }]}>
  ...
</TouchableOpacity>
11
moritzw