StyleSheet.create를 사용할 필요가 있습니까?

Question

나는 이런 식으로 스타일을 정의하고있다 :

const styles = StyleSheet.create({ 
    container: {}, 
    tabContent: { 
     alignItems: "flex-start", 
     flexDirection: "column", 
     padding: 21 
    }, 
    tabHeader: { 
     flex: 0, 
     fontSize: 10, 
     paddingTop: 10, 
    }, 
    tabText: { 
     flex: 0, 
     fontSize: 14, 
     paddingTop: 10, 
     textAlign: "left" 
    }, 
}) 

그러나, 나는 StyleSheet.create를 사용하는 것을 잊었다 및 일반 목적으로 사용되는 시간 :

const styles = { 
    container: {}, 
    tabContent: { 
     alignItems: "flex-start", 
     flexDirection: "column", 
     padding: 21 
    }, 
    tabHeader: { 
     flex: 0, 
     fontSize: 20, 
     paddingTop: 10, 
    }, 
    tabText: { 
     flex: 0, 
     fontSize: 14, 
     paddingTop: 10, 
     textAlign: "left" 
    }, 
} 

는 놀랍게도이 일을. StyleSheet.create를 사용하여 스타일을 정의하거나 일반 객체를 사용할 수 있습니까?

Answer 1

I 은 가능한 한 일반적인 객체를 사용하는 것보다 성능이 좋은 것으로 StyleSheet을 사용하는 것이 더 좋습니다.

반작용에서

기본 문서 :

성능 :

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

비슷한 질문 누군가가 성능을 StyleSheet를 사용하는 것은 여전히 ​​더 나은 말에 (생각 그것은 github의 문제였다) 어딘가에서 뭔가를 본 기억이.

희망이 도움이됩니다.

Answer 2

잘못된 방법이 다릅니다.

사용 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 
 
    } 
 
};

Answer 3

@ 데이비드 컴파일하는 동안 계속 뭔가를 참조하지 않는 한, 나는 스타일의 객체에서 스타일 시트를 만들기 여기

문서 대신 새로운 창조의 ID로 그것을 참조하는 것을 가능하게 생각 스타일 개체를 매번.

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

스타일 객체를 임의의 구성 요소 파일로 가져 오기 만하면 파일 전체에서 스타일 객체를 재사용하지 않아도됩니다.내가 style={Object.assign({}, style1, { color })} 무언가 같이 당신은 내가 또한 일반 개체 오류가 발생하지 않을 것으로 나타났습니다 StyleSheet