기본 외부 스타일시트 반응

기본 외부 스타일시트 반응

React Native에서는 HTML처럼 모든 스타일을 한 파일에 저장하여 쉽게 유지 관리할 수 있는 방법이 있는가?.css파일

그리고 현재 사용자를 기준으로 다른 스타일이 있는 모듈을 가지고 있다.

스타일 구성요소를 만들면 모든 스타일...

import { StyleSheet } from "react-native"

export default StyleSheet.create({
   ...
})

어떤 관점에서든 스타일이 필요한 건 그냥...

import styles from "./Styles"

ECMAScript 6에 따르면 스타일을 내보내기 위한 올바른 방법은 다음과 같다.

style.js

import {StyleSheet} from 'react-native'

export default StyleSheet.create({

container: {
    flex: 1,
    marginTop: 20
},
welcome: {
    textAlign: 'center'
}
});

그러면 메인 JS 파일에서 이렇게 가져오면 된다.

import styles from './style'

네, 가능합니다.

• 먼저 파일 이름 style.js를 만들고 다음 예와 같은 원하는 스타일을 만드십시오.

스타일.js

module.exports = {

    "centerRowAligment":{
        flex: 1,
        backgroundColor:"#a22a5f",
        flexDirection: 'row',
        alignItems:"center"
    },
    "centerColumnAligment":{
        flex: 1,
        justifyContent: 'center',
        flexDirection: 'column',
        alignItems: 'center'
    }

}

그런 다음 대응 파일에서 해당 파일을 가져오십시오.

import styles from './style'

렌더 구성 요소에 사용

   <View style={styles.centerRowAligment}></View>

잘 될 거야!

너는 내 프로젝트를 n-less로 시도해볼 수 있다.

스타일시트를 더 적은 .js로 jsx/js 파일로부터 분리한다.

그리고 나는 VS Code 확장자를 가지고 있는데, 당신은 .less 파일과 .js/.jsx 파일 사이를 쉽게 이동할 수 있다.

이 모듈을 파이프라인에 추가하고 Gulp 또는 Webpack 태스크를 생성하여 CSS를 JavaScript로 변환할 수 있다.

https://github.com/sabeurthabti/react-native-css

내 경험에 따르면, 리액트 네이티브의 스타일시트는 실제로 폭포화되지 않기 때문에 웹과 리액션 네이티브에 동일한 CSS를 사용하지 않는 것이 가장 좋다.

---

또는 파이프라인을 조금만 변경할 의향이 있다면, SASS의 모든 기능을 지원하는 CSS4에서 CSS3로 전송하는 PostCSS를 Transpile, CSS에서 JavaScript로 변환하는 데도 사용할 수 있다.

https://github.com/postcss/postcss-js

나는 @Chris Geirman 해결책에 동의한다.스타일만 만들 수 있다.Chris가 위에 언급한 시트를 아무 보기로 가져오십시오.외부 스타일을 병합하려는 경우개별 뷰/구성 요소 스타일시트로 시트를 작성한 후 ES6 새 기능 Object.assign을 사용하십시오.

스타일 = required('/StyleSheet');

constallViewStyle = Object.assign(스타일, StyleSheet.create)({ ...}); );

내 자바스크립트에서 스타일을 정의하는 모든 과정은 내가 처음 리액션 네이티브 from Ionic으로 옮겼을 때 많은 혼란을 야기시켰어. 그러니 이것이 도움이 되었으면 좋겠어...

첫째로, React Native는 단순히 Native WebView에서 실행되는 애플리케이션이 아님을 이해해야 한다.JavaScript를 렌더링하는 대신, 실제로 더 높은 수준의 플랫폼별 구성요소를 생산하는 것이다.

따라서 우리는 (외부 .css 스타일시트를 통해) Ionic과 같은 다른 프레임워크를 사용하여 작성된 하이브리드 애플리케이션과 같은 스타일링 규칙을 적용할 수 없다.어쨌든 전적으로 그렇지는 않다(아래 참조).

위에 언급된 두 가지 옵션은 모두 유효한 해결책이다.사용:

• JavaScript 파일을 분리하여 스타일을 더욱 모듈화
• 라이브러리를 사용하여 CSS를 변환하여 Native StyleSheet 객체 대응

후자의 옵션에 대한 참고: postcss-js와 같은 라이브러리는 당신이 보통 사용하는 방식, 즉 .class 및 #id와 같은 CSS 선택기에 기초한 스타일링을 가능하게 하지 않는다.스타일은 여전히 소품을 통해 구성요소로 전달되어야 할 것이다.

최근 리액션:

내 스타일시트에는 CoolTextStyle.js(인덱스.ios.js와 동일한 디렉토리에 있음)가 있다.그리고 'StyleSheet' 수업도 필요 없는 것으로 밝혀졌다.

module.exports = 
{
  borderRadius:5
}); 

그 다음 색인.ios.js.

import React, { Component, PropTypes } from 'react';
import { View, Text, TextInput,TouchableHighlight,StatusBar } from 'react-native';

var cool_text_style = require('./CoolTextStyle');

export default class delme extends Component 
{
  render() 
  {
    return (
  <View>
    <StatusBar hidden={true} />
    <Text>Login</Text>
    <TextInput placeHolder='UserName' style={cool_text_style}></TextInput>
  </View>
)
  }
}


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

위의 답들 중 어느 것도 분리에 관한 관점에서는 완벽하지 않다.은 자바스크립트 을 줄 이다.Is there a way in React Native that I can put all of my styles in a single file.

• 폴더와 파일을 작성하기만 하면 된다.ex:- MyApp/cssstyle/StyleSheet.js
• 그러면 단순 모듈.export 객체는 화면 이름과 해당 스타일을 포함한다.

const {StyleSheet} = require('react-native');

module.exports = {

  login: StyleSheet.create({
    bg1: {
      backgroundColor: 'red',
    },
  home: StyleSheet.create({
    bg2: {
      backgroundColor: 'yellow',
    },
  profile: StyleSheet.create({
    bg3: {
      backgroundColor: 'green',
    },

  }),

};

• 이제 스타일을 적용할 기본 화면(ex: login.js)에 표시하십시오. require your styles with proper StyleSheet path로는 내로 입니다MyApp/cssstyle/StyleSheet

const styles = require('MyApp/cssstyle/StyleSheet').login

그런 다음 이렇게 사용하다.

 <View style={styles.bgr}>
   ...
 </View>

즉, 이렇게 함으로써 여러 화면들에 대한 스타일을 분리할 수 있고, 그 동안 모든 스타일을 하나의 파일로 가질 수 있다.

참조URL: https://stackoverflow.com/questions/33595642/react-native-external-stylesheet