Rozmieszczenie ikon na jednej linii, po przeciwnych stronach

Dopiero zaczynam przygodę z react-native/js/css itp i mam kilka pytań

1. Chce ustawić dwie ikony na tej samym poziomie. Jedna ma być po lewej a druga po prawej stronie jak to można zrobić ?
2. mam obrazek splash I chce aby się dostosowywał do różnych rozdzielczości jak to mogę zrobić ?

Musisz poczytać dokumentacje + obejrzeć jakiś tutorial, który tłumaczy krok po kroku jak to zrobić, bo są to dość podstawowe rzeczy

1. Dokumentacja React Native: https://reactnative.dev/docs/components-and-apis
2. I jeśli zbudowałeś projekt w oparciu o Expo to także to https://docs.expo.dev/

TakMaszRacje napisał(a):

1. Chce ustawić dwie ikony na tej samym poziomie. Jedna ma być po lewej a druga po prawej stronie jak to można zrobić ?

import React from 'react';
import { Image, View, StyleSheet } from 'react-native';

const App = () => (
  <View style={styles.container}>
    <View style={styles.column}>
      <Image style={styles.icon} source={require("./assets/snack-icon.png")} />
    </View>

    <View style={styles.column}>
      <Image style={styles.icon} source={require("./assets/snack-icon.png")} />
    </View>
  </View>
);

// Tutaj możesz zmienić stylowanie
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  column: {
    flex: 1,
  },
  icon: {
    width: 30,
    height: 30,
  },
});

export default App;

TakMaszRacje napisał(a):

2. mam obrazek splash I chce aby się dostosowywał do różnych rozdzielczości jak to mogę zrobić ?

Obrazek splash... nie wiem, czy dobrze rozumiem, ale chcesz go ustawić jako tło aplikacji?

https://reactnative.dev/docs/imagebackground

import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";

const image = { uri: "https://reactjs.org/logo-og.png" };

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} resizeMode="cover" style={styles.image}>
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1,
    justifyContent: "center"
  },
  text: {
    color: "white",
    fontSize: 42,
    lineHeight: 84,
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#000000c0"
  }
});

export default App;

@Xarviel dzięki za odp. Mam jeszcze problem druga ikonka jest po środku

Co do splash to mam go ustawiony na tło przy uruchomieniu ale na emulatorze iPhone jest ok a na androidzie rozdzielczość jest zła. I chciałbym to ustawić albo dodać kilka obrazków różnej rozdzielczości a żeby sytem automatycznie dobierał obrazek z odpowiednią rozdzielczością?

TakMaszRacje napisał(a):

Mam jeszcze problem druga ikonka jest po środku

Caly kontener zrobiłem na flexboxie i jeśli masz problem ze zmianami to musisz doczytać jak działa flexbox. Zwłaszcza przejrzyj się właściwością justify-content, oraz flex

TakMaszRacje napisał(a):

Co do splash to mam go ustawiony na tło przy uruchomieniu ale na emulatorze iPhone jest ok a na androidzie rozdzielczość jest zła. I chciałbym to ustawić albo dodać kilka obrazków różnej rozdzielczości a żeby sytem automatycznie dobierał obrazek z odpowiednią rozdzielczością?

Pewnie jest sposób, żeby ładować odpowiedni obrazek w zależności od rozdzielczości ekranu, ale osobiście nigdy tego nie robiłem w React Native i trzeba byłoby poszukać odpowiedniego rozwiązania.