네이티브 글로벌 스타일 반응

저는 React를 처음 접했고 컴포넌트 기반 인라인 스타일의 이점을 이해합니다. 그러나 일종의 글로벌 스타일을 가질 수있는 적절한 방법이 있는지 궁금합니다. 예를 들어 앱 전체에서 동일한 텍스트 및 버튼 색상을 사용하고 싶습니다.

모든 구성 요소에서 반복하는 대신 (필요한 경우 x 위치에서 변경해야 함) 초기 생각은 자체 파일에 '기본'StyleSheet 클래스를 만들어 내 구성 요소로 가져 오는 것입니다.

더 나은 또는 더 많은 '반응'방법이 있습니까?

재사용 가능한 스타일 시트를 만들 수 있습니다. 예:

style.js

'use strict';

var React = require('react-native');

var {
  StyleSheet,
} = React;

module.exports = StyleSheet.create({

alwaysred: {
    backgroundColor: 'red',
    height: 100,
    width: 100,
},

});

구성 요소에서 :

var s = require('./style');

...그때:

<View style={s.alwaysred} ></View>

스타일 (IE, Style.js)에 대한 파일을 만듭니다 .

다음은 예입니다.

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1
  },
  welcome: {
    fontSize: 20
  }
});

스타일을 사용하려는 파일에 다음을 추가하십시오.

import styles from './Style'

일부 전역 변수를 설정하려면 시도해 볼 수 있습니다.

AppStyles.js

export default AppStyles = {
    colour: {
        background: '#f4f9fd',
        font: '#434e5a',
        primary: '#ff3b30'
    }
}

index.ios.js

import AppStyles from './AppStyles';

const styles = StyleSheet.create({
    container: {
        backgroundColor: AppStyles.colour.background
    }
});

전역 스타일링 변수를 지원하는 react-native-extended-stylesheet 를 사용해 볼 수도 있습니다 .

// app.js
EStyleSheet.build({
   buttonColor: 'green'
});

// component.js
var styles = EStyleSheet.create({
  button: {
    backgroundColor: '$buttonColor',
    ...
  }
});

' styles.js '와 같은 모든 스타일을 저장할 파일을 만들고 필요에 따라 CSS 유형 코드를 작성해야합니다.

'use strict';
import {StyleSheet} from 'react-native';

export default StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    title: {
        fontSize: 10,
        color: '#000',
        backgroundColor: '#fff'
    },

    button: {
        fontSize: 12,
        color: '#000',
        backgroundColor: '#fff'
    }

});

이제 보시다시피 전역 스타일을 사용할 수 있습니다.

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import StyleSheet from './config/styles';

export default class App extends Component {

  render() {
    return (
      <View
        style={StyleSheet.container}>
        <Button
          style={StyleSheet.button}
          title="Go to Lucy's profile"
        />
      </View>
    );
  }
}

내 라이브러리 react-native-style-tachyons를 사용해보십시오 . 이것은 전역 스타일을 제공 할뿐만 아니라 루트 글꼴 크기에 상대적인 너비와 높이를 가진 디자인 우선 반응 형 레이아웃 시스템입니다.

이 모든 방법은 질문에 직접 대답하지만 내가 아는 한 React와 같은 구성 요소 기반 디자인 시스템에서 수행하는 방법이 아닙니다.

원자 구성 요소로 시작한 다음 계층화하고 그룹화 할 수 있습니다. 다음 기사는 이러한 사고의 흐름을 더 명확하게 만들 수 있습니다. http://atomicdesign.bradfrost.com/chapter-2/

자연계에서는 원자 원소가 결합하여 분자를 형성합니다. 이 분자들은 더 결합하여 비교적 복잡한 유기체를 형성 할 수 있습니다.

존재하지 않는 기본 구성 요소가 필요하면 만듭니다. 그런 다음 다른 덜 구체적인 구성 요소를 만들 수 있습니다. 예를 들면 :

// rerender is cheaper without style prop when
// the default style is an unchanged reference
// instead of a new object every time.
const style = {
  color   : 'MidnightBlue',
  fontSize: 14,
}

function getStyle (styleProp) {
  // styleProp is able to overwrite style
  if (styleProp) return {...style, ...styleProp}
  else return style
}

export default function CustomText (props) {
  return (
    <Text style={getStyle(props.style)}>
      {props.children}
    </Text>
  )
}

그런 다음 사용하는 CustomText모든 곳에서 대신 Text. 또한 함께 할 수있는 View, div, span다른 사람 또는 아무것도.

외부 CSS 파일 main.css

'use strict';

var {
   StyleSheet,
 } = 'react-native';

module.exports = StyleSheet.create({

  main: {
     backgroundColor: 'gray',
     height: 20,
     width: 100,
  }
});

구성 요소에 CSS 파일의 인스턴스를 만듭니다.

var mainCss = require('./main');

<View style={mainCss.main}><Text>Hello</Text></View>

여기에서 스타일을 정렬 한 다음 다른 구성 요소로 가져 오는 우아한 방법을 찾을 수 있습니다. 모든 스타일 파일을 수집하고 파사드로 작동 할 index.js를 만드는 폴더를 만들 수 있습니다.

index.js는 다음과 같습니다.

import Variables from './variables';
import GlobalStyles from './global'; 

export { Variables, GlobalStyles };

다음과 같이 가져옵니다.

import { GlobalStyles } from './stylesheets/index';

자세한 정보는 다음과 같습니다.

https://thoughtbot.com/blog/structure-for-styling-in-react-native

React Native 용 Shoutem 테마 를 살펴보세요 .

다음은 Shoutem 테마로 얻을 수있는 것입니다.

특정 스타일이 스타일 이름으로 구성 요소에 자동으로 적용되는 전역 스타일 :

const theme = {
  'my.app.ComponentStyleName': {
    backgroundColor: 'navy',
  },
};

styleName(CSS 클래스와 같은) 특정 구성 요소 특정 스타일 활성화 :

const theme = {
  'my.app.ComponentStyleName': {
    '.rounded': {
      borderRadius: 20,
    },
    backgroundColor: 'navy',
  },
};

// Implementation - will apply borderRadius to Component
<Component styleName="rounded"/>

자동 스타일 상속 :

const theme = {
  'my.app.ComponentStyleName': {
    'my.app.ChildComponentStyleName': {
      backgroundColor: 'red',
    },
    '.rounded': {
      borderRadius: 20,
    },
    backgroundColor: 'navy',
  },
};

// Implementation - will apply red background color to ChildComponent
<Component styleName="rounded">
  <ChildComponent/>
</Component>

구성된 구성 요소의 중첩 스타일 :

const theme = {
  'my.app.ComponentStyleName': {
    containerView: {
      paddingTop: 10,
    },
    innerView: {
      backgroundColor: 'yellow',
    },
  },
};

// Of course do not forget to connect Component
function Component({ style }) {
  return (
   <View style={style.containerView}>
    <View style={style.innerView}>
     <Text>Warning with yellow background.</Text>
    </View>
   </View>
  );
}

작동하게하려면 StyleProvider컨텍스트를 통해 다른 모든 구성 요소에 스타일을 제공하는 래퍼 구성 요소 인 을 사용해야 합니다. Redux와 유사합니다 StoreProvider.

또한 connectStyle항상 연결된 구성 요소를 사용하도록 구성 요소를 스타일에 연결해야합니다 . Redux와 유사합니다 connect.

export const styledComponent = connectStyle('my.app.ComponentStyleName',
                                { ...defaultStyleIfAny })(Component);

문서 내에서 예제를 볼 수 있습니다.

마지막으로, 우리 는 이미 스타일에 연결된 UI ToolKit 에 컴포넌트 세트를 제공 했으므로 글로벌 스타일 / 테마로 가져 와서 스타일을 지정할 수 있습니다.