$env · 디스플레이 환경

width, height은 기기의 현재 사용 가능한 영역의 너비와 높이(화면 포인트)이며 카드 크기 및 디스플레이 환경에 따라 다릅니다. 이는 전체 전화기의 해상도도 아니고 이미지의 픽셀 수도 아닙니다.

크기에 따라 조정해야 하는 글꼴, 그래픽 반경 및 끝점 좌표는 main()의 이 너비와 높이를 사용하여 계산해야 합니다. 고정된 120포인트 원은 항상 고정된 크기를 사용합니다. 카드에 따라 다양하게 만들려면 사용 가능한 너비와 높이 중 더 작은 값을 사용하여 직경을 계산합니다.

foreground은 현재 배경에 적합한 텍스트 색상이고, accent은 강조 색상이며, dark는 현재 어두운 모양을 나타냅니다. mode의 값은 instruments 또는 hud이며, 이는 일반 미터 또는 HUD 디스플레이를 나타냅니다.

speedUnit은 현재 속도 표시 단위를 나타내고, language은 앱 언어, reduceMotion는 시스템 약화 동적 효과 설정을 나타냅니다. obdDevice은 현재 연결된 장치의 id 및 name을 제공하며, 준비된 장치가 없으면 비어 있습니다. 단위 라벨은 숫자 값과 함께 사용해야 합니다. 레이블 자체를 변경해도 숫자 값은 변환되지 않습니다.

다음 예에서는 HUD 모드에서 더 큰 글꼴 크기를 사용하고 현재 테마 텍스트 색상 및 속도 단위를 사용합니다.

function main() {
  return (
    <Text fontSize={$env.mode === 'hud' ? 72 : 48} color={$env.foreground}>
      {$env.speedUnit}
    </Text>
  );
}

CapDrive는 차원, 테마 또는 기타 상황이 변경될 때 새로운 입력을 제공합니다. 다음 추첨에서 새 값을 사용하도록 main() 안에 $env에 의존하는 계산을 넣습니다. 반복되는 애니메이션 효과는 사용자의 시스템 기본 설정을 무시하지 않도록 reduceMotion에 따라 조정됩니다.