Skip to content
Kezdőlap » Fix gomb a képernyőn

Fix gomb a képernyőn

Fix gomb, azaz folyamatosan a képernyőn látható gomb. Esetenként szükség lehet arra, hogy amikor egy képernyőt nézegetünk, valamilyen funkciót ellátó gomb mindig látható legyen.

Hogy az a gomb hol jelenjen meg az természetesen ízlés kérdése.

A megvalósítása egyáltalán nem ördögtől való, magyarul pofonegyszerű.

Mit csinálunk?

Egy nagyon egyszerű használati példát hoztam: van egy képernyőnk, amin hosszabb, görgethető tartalom van. A feladat az, hogy bármerre is gördítjük a tartalmat, mindig legyen a képernyő alján, egy gomb, amit bármikor megnyomhatunk. Olyan, mintha rágógumival odaragasztottuk volna 🙂

fix gomb

Megoldás

Igazából két fő állományunk van. Az egyik az App.js. Ebben van a teljes képernyő tartalom, melynek eleje így néz ki:

export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView style={styles.content}>
        <Text style={styles.title}>Scroll up!</Text>
        <Text style={styles.paragraph}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>

Van egy külső tároló (View).

Ezen belül helyeztem el a görgethető tartalmat. A görgethető tartalmakról (ScrollView) itt találsz bővebb leírást.

A ScrollView elemen belül elhelyeztem néhány sima Text elemet, amik a szöveges részeket tartalmazzák.

A kód vége így fest:

      </ScrollView>
      <FixedButton />
    </View>
  );
}

Azért másoltam ide, hogy pontosan látszódjon a fix gombot tartalmazó komponens (FixedButton) nem a ScrollView-n belül van.

A Fix gomb komponense

Ez a másik fontos file az alkalmazásban (./components/FixedButton.js). A gombot, ami a képernyőn állandó jelleggel látható, egy külön komponensbe tettem, melynek szerkezete nagyon egyszerű:

    <View style={styles.container}>
      <Pressable onPress={pressHandler} style={styles.btn}>
        <Text>Click me!</Text>
      </Pressable>
    </View>

Ez maga a komponens DOM-ban megjelenő szerkezete: van egy külső konténer (View), ezen belül a Pressable és a Text komponens valósítja meg a gombot.

Ez sem atomfizika tehát :). A Pressable komponenst használtam fel a gomb létrehozására, ami a react-native csomagban van. Itt találhatsz egy konkrét példát, ami kifejezetten a Pressable használatát tárgyalja. (Jóllehet a Button beépített komponens is használható lehetett volna, de azt nehezebb dizájnolni.)

A lényeg egyébként a stílusban van:

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    padding: 20,
    height: 60,
    backgroundColor: "orange",
    margin: 5,
    borderRadius: 30
  },
  btn: {
    height: '100%',
    justifyContent: 'center',
    alignItems: "center"
  },
});

A CSS-ből tudjuk, hogy amit le akarunk valahová „ragasztani” a képernyőn, annak abszolút pozíciót kell beállítani (position: ‘absolute’). Ezen kívül látható, hogy milyen egyéb, a pozícionálást segítő CSS tulajdonságokat használtam.

Érdemes a lenti példát egyben megnézni és kipróbálni. Sok sikert a használathoz!

Működő példa

A kipróbálható és tetszés szerint konfigurálható példa itt van egy „elrágcsálható” Expo Snack formájában.

Címkék: