web-dev-qa-db-ja.com

React Native？の外部スタイルシートに小道具を渡す

私はReactおよびReact Nativeを初めて使用しています。現時点では、各コンポーネントのコードを2つの個別のファイルに分割しています。

  1. index.jsすべてのReactコード、および;
  2. styles.js（StyleSheet）

小道具を外部スタイルシートに渡す方法はありますか？

例：index.js：

render() {
  const iconColor = this.props.color || '#000';
  const iconSize = this.props.size || 25;

  return (
    <Icon style={styles.icon} />
  );
}

例styles.js：

const styles = StyleSheet.create({
  icon : {
    color: iconColor,
    fontSize: iconSize
  }
});

上記のコードは機能しませんが、私がやろうとしていることを理解するためだけにあります。どんな助けでも大歓迎です！

javascriptreactjsreact-nativereact-jsxjsx
12
chapeljuice

IconColorとiconSizeを引数として取り、StyleSheetオブジェクトを返すクラスを作成します。

// styles.js

export default class StyleSheetFactory {
    static getSheet(iconSize, iconColor) {
        return StyleSheet.create({
            icon : {
                color: iconColor,
                fontSize: iconSize
            }
        })
    }
}

// index.js

render() {
    let myStyleSheet = StyleSheetFactory.getSheet(64, 'red')
}
7
FuzzyTree

私は自分のスタイルを別のファイルstyles.jsに入れたいと思っています。 styles.jsの内部：

export const styles = (props) => StyleSheet.create({
        icon : {
        color: props.iconColor,
        fontSize: props.iconSize
      }
    }

メインクラス内で値を渡すことができます

return (
    <Icon style={styles(this.props).icon} />
  );

または、それらの値を直接指定して、

export const styles = (iconColor,iconSize) => StyleSheet.create({
    icon : {
    color: iconColor,
    fontSize: iconSize
  }
}

メインクラスの中で

return (
    <Icon style={styles(this.props,iconColor, 
this.props.iconSize).icon} />
 );
8
Kevin