Wysokość i szerokość
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
Wysokość i szerokość komponentu określają jego rozmiar na ekranie.
Stałe wymiary
Podstawowy sposób ustawiania wymiarów komponentu to dodanie stałych wartości width (szerokość) i height (wysokość) w stylu. Wszystkie wymiary w React Native są bezwymiarowe i reprezentują piksele niezależne od gęstości ekranu.
Ta metoda jest powszechnie stosowana dla komponentów, których rozmiar powinien być zawsze stały (wyrażony w punktach) i nie obliczany dynamicznie na podstawie rozmiaru ekranu.
Nie istnieje uniwersalne przełożenie punktów na fizyczne jednostki miary. Oznacza to, że komponent o stałych wymiarach może mieć różną fizyczną wielkość na różnych urządzeniach i rozdzielczościach ekranów. Jednak w większości przypadków różnica ta jest niezauważalna.
Wymiary flex
Użyj właściwości flex w stylu komponentu, aby dynamicznie dopasowywał on swój rozmiar do dostępnej przestrzeni. Zazwyczaj stosuje się flex: 1, co powoduje równomierne wypełnienie dostępnego miejsca przez komponenty współdzielące tego samego rodzica. Im większa wartość flex, tym większą część przestrzeni zajmie komponent w porównaniu do rodzeństwa.
Komponent może rozszerzyć się, aby wypełnić dostępną przestrzeń, tylko gdy jego rodzic ma wymiary większe niż 0. Jeśli rodzic nie ma ani stałej width i height, ani flex, będzie miał wymiary 0, a komponenty potomne flex nie będą widoczne.
Gdy już kontrolujesz rozmiar komponentu, następnym krokiem jest nauka układania elementów na ekranie.
Wymiary procentowe
Jeśli chcesz wypełnić określoną część ekranu, ale nie chcesz używać układu flex, możesz zastosować wartości procentowe w stylu komponentu. Podobnie jak w przypadku wymiarów flex, wymiary procentowe wymagają rodzica o zdefiniowanym rozmiarze.