카테고리 없음

[반응 네이티브] StyleSheet.create를 사용해야합니까?

필살기쓰세요 2021. 1. 25. 22:14

나는 생각 은 여전히 더 나은 사용 StyleSheet가능한 일반 객체를 사용하는 것보다 그 이상 확대됨에있다.

React Native Docs에서 :

공연:

  • 스타일 개체에서 스타일 시트를 만들면 매번 새 스타일 개체를 만드는 대신 ID로 참조 할 수 있습니다.
  • 또한 브리지를 통해 한 번만 스타일을 보낼 수 있습니다. 이후의 모든 사용은 ID를 참조합니다 (아직 구현되지 않음).

비슷한 질문으로 어딘가에서 무언가를 보았고 (github 문제라고 생각하십시오) 누군가 StyleSheet가 성능 을 위해 사용 하는 것이 여전히 낫다고 말하는 것을 기억하십시오 .

도움이 되었기를 바랍니다!

-------------------

귀하의 질문에 대한 답은 아니지만 FWIW

차이가 있습니다. 던지기 StyleSheet.create때문에 스타일을 연결 (확산 또는 할당) 할 수 없습니다 react-native.

StyleSheet.createJS 객체가 아닌 아무것도 반환하는 것처럼 보입니다 . 당신은 두 가지 스타일에서 CONCAT하려고하면 StyleSheet.create, react-native당신에게 RebBox를 생성합니다.

예:

const css = StyleSheet.create( {
   btn: { color: 'blue' },
      mb10: { marginBottom: 10 }
      } )
      
      render() {
          // I want to concat styles using spread or assign
              let btnClass = { ...css.btn, ...css.mb10 }; // spread
                  let btnClass = Object.assign({},css.btn, css.mb10); // plain'ol assign
                  
                      return (
                              <Button style={btnClass} />
                                  )
                                  }
                                  

그러나 react-native갑자기 던졌습니다 TypeError. 에서 스타일은 StyleSheet.create어떤 이유로 개체가 아닙니다.

TypeError :이 환경에서 할당 소스는 객체 여야합니다.

여기에 이미지 설명 입력

-------------------

@David가 컴파일 중에 진행되는 것을 언급하지 않는 한 여기 문서가 있다고 믿습니다.

스타일 개체에서 스타일 시트를 만들면 매번 새 스타일 개체를 만드는 대신 ID로 참조 할 수 있습니다.

style={{ ... }}태그 를 수동으로 추가 하는 것을 말합니다.

스타일 개체를 임의의 구성 요소 파일로 가져 오기만하면 파일 간에도 스타일 개체를 재사용하는 것을 방지 할 수 있습니다.

개인적으로 저는 평범한 개체를 선호하여 스타일 개체를 구성 style={Object.assign({}, style1, { color })}할 수 있습니다.StyleSheet

-------------------

잘못된 방법은 다릅니다.

를 사용 StyleSheet.create하면 빨간색 화면 오류 팁이 표시됩니다.

const styles = StyleSheet.create({
      container: {
          flexDirection:"row",
              alignItems:"center",
                  fontSize:"20",//error
                   }
                   });
스 니펫 확장

사용하지 StyleSheet.create않으면 다음과 같은 경고가 표시됩니다.

const styles = {
      container: {
          flexDirection: "row",
              alignItems: "center",
                  fontSize: "20", //error
                    }
                    };
스 니펫 확장



출처
https://stackoverflow.com/questions/39917270