Buttons nebeneinander

[MiloRegensburg]

Ich bin ein kompletter Anfänger und meine buttons stehen leider untereeinander. Ich würde aber gerne, dass jeweils 2 nebeienander stehen. wie erreiche ich das. ich arbeite mir VS und Java. Wenn ich chatgpt frage sagt er mir denbefehl buttonrow. den gibt es aber bei VS nicht.

{/* BUTTONS UNTER DER KARTE */}
<View style={styles.buttonContainer}>
<Text style={styles.title}>Willkommen bei PikUp!</Text>
{/* Erste Reihe mit zwei Buttons */}
<TouchableOpacity style={styles.button} onPress={() => router.push('/suchen')}>
<Text style={styles.buttonText}>🔍 Transport suchen</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => router.push('/anbieten')}>
<Text style={styles.buttonText}>🚛 Transport anbieten</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => router.push('/chats')}>
<Text style={styles.buttonText}>🚛 Chats</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => router.push('/profil')}>
<Text style={styles.buttonText}>🚛 Profil</Text>
</TouchableOpacity>

</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
map: {
width: '100%',
height: Dimensions.get('window').height * 0.6,
},
buttonContainer: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
backgroundColor: '#1B3A4B',
paddingTop: 10,
paddingBottom: 30,
width: '100%',
},
title: {
fontSize: 30,
fontWeight: 'bold',
marginBottom: 40,
color: '#D1A05D',
},
button: {
width: 250,
paddingVertical: 15,
backgroundColor: '#D1A05D',
borderRadius: 50,
alignItems: 'center',
marginBottom: 15,
},
buttonText: {
fontSize: 18,
color: '#fff',
fontWeight: 'bold',
},

 

[haderlump222]

Hi, tut mir leid, aber das sieht nicht aus wie Java Code.

Was meinst du mit VS?

 

[Nouser]

Versuche doch mal

flex-direction: column;

im buttonContainer.

Mein css ist allerdings ziemlich eingerostet.

 

[MiloRegensburg]

Hi, tut mir leid, aber das sieht nicht aus wie Java Code.

Was meinst du mit VS?

Visual Studio. Also hinter der Datei steht .tsx. Und ich habe 1-2 Dateien .js

 

[MiloRegensburg]

Hi, tut mir leid, aber das sieht nicht aus wie Java Code.

Was meinst du mit VS?

Versuche doch mal

flex-direction: column;

im buttonContainer.

Mein css ist allerdings ziemlich eingerostet.

Ist es denn zwingend wichtig, dass ich bei der Erstellung einer App immer dieselbe Sprache benutze?

 

[KonradN]

Ist es denn zwingend wichtig, dass ich bei der Erstellung einer App immer dieselbe Sprache benutze?

Man sollte zumindest wissen, was man nutzt.

So ist das Thema von Dir hier html/css bezogen. Das hat mit Java nichts zu tun.
Html gibt lediglich Daten strukturiert an in speziellen definierten Tags und CSS sagt, wie die Daten dargestellt werden sollen.

Die .js Dateien sind JavaScript. JavaScript ist aber nicht Java! Und das JavaScript dient sozusagen der Anpassung und Veränderung der Daten, die durch html gegeben wurden.

ts wäre TypeScript - das wäre eine Sprache, die zu JavaScript übersetzt wird.

jsx/tsx sind spezielle Dateien, die html ähnliche Strukturen in JavaScript oder TypeScript einbetten.

Das nur als grobe Übersicht zu den erwähnten Dingen. Natürlich sehr stark vereinfacht.

 

[M.L.]

buttonrow ...VS

Für Frontend-Programmierung empfiehlt sich (eher) "Visual Studio Code" (VS eher für Backend).
Und wie man eine TypeScript-Datei transpiliert und weiterverwendet eine Antwort von Google Gemini: "...Speichere die TypeScript-Datei als buttonrow.ts, die HTML-Datei als index.html und die CSS-Datei als style.css im selben Verzeichnis. ... TypeScript-Kompilierung: Du musst die TypeScript-Datei in JavaScript kompilieren, bevor du sie im Browser verwenden kannst. Dies kannst du mit dem TypeScript-Compiler (tsc buttonrow.ts) tun. Dadurch wird eine buttonrow.js-Datei erstellt, die du in dein HTML einbinden musst. ..."

 

[KonradN]

Wobei ich den generellen Ansatz in Frage stellen würde …. Es wird ja auf irgend ein Framework gesetzt vermute ich (tsx Dateien sind da ein gutes Anzeichen nach meiner Erfahrung). Hier wäre also mein Ratschlag, sich die Technologie von Grund auf anzusehen.

Ich selbst bin übrigens ein Fan, bei den Basics anzufangen:
HTML Grundlagen erarbeiten
Dann die zwei Punkte in beliebiger Reihenfolge:

• CSS Grundlagen um das Aussehen der Seite anzupassen
• JS Grundlagen: dynamische Anpassung der Webseite

Mit den Grundlagen fällt es dann deutlich einfacher, ein Framework zu verstehen.


Aber das nur ganz am Rande - das hilft dem TE erst einmal nicht bei dem konkreten Problem. Und es vermittelt evtl. den Eindruck, dass sein Problem nicht willkommen ist. Und der Eindruck wäre falsch: Auch so Themen sind willkommen und das sollen nur Hilfen zur Selbsthilfe sein, die mittelfristig helfen…. (So nach und nach Zeit verwendet wird, um sich die Grundlagen etwas zu erarbeiten)

 

[MiloRegensburg]

Man sollte zumindest wissen, was man nutzt.

So ist das Thema von Dir hier html/css bezogen. Das hat mit Java nichts zu tun.
Html gibt lediglich Daten strukturiert an in speziellen definierten Tags und CSS sagt, wie die Daten dargestellt werden sollen.

Die .js Dateien sind JavaScript. JavaScript ist aber nicht Java! Und das JavaScript dient sozusagen der Anpassung und Veränderung der Daten, die durch html gegeben wurden.

ts wäre TypeScript - das wäre eine Sprache, die zu JavaScript übersetzt wird.

jsx/tsx sind spezielle Dateien, die html ähnliche Strukturen in JavaScript oder TypeScript einbetten.

Das nur als grobe Übersicht zu den erwähnten Dingen. Natürlich sehr stark vereinfacht.

So sieht es bei mir aus. also wie gesagt. ich bin ein kompletter Anfänger. chat gpt hat mir da so gesgt. aber da sind so viele fragen offen, die du wahrscheinlich nicht in einem Monat beantworten könntest

 

[KonradN]

Also das sieht schon sehr nach VSC aus - siehe Hinweis von M.L.

In einem Monat könnte man extrem viel machen, so man sich Vollzeit damit beschäftigt, aber man müsste hier einmal schauen, was Du genau machen willst / was für ein Vorgehen Sinn machen kann.

Das eigentliche Thema von dem Thread ist ja die Frage, wie man Buttons nebeneinander darstellen kann. Das wäre dann aus meiner Sicht ein HTML / CSS Thema. Aber da kommt dann auch schon andere Themen mit hinein, denn teilweise setzt man einfach auf bestehende Dinge aus. Wenn Du Dich intensiver mit der Darstellung von Elementen beschäftigen willst, dann wäre also vor allem das Themengebiet CSS wichtig.

Generell betrachtet ist es ansonsten ja so, dass Du ein Web-Frontend bauen willst. Da kommen also (aus Sicht des Browsers) HTML,CSS und JavaScript zum Einsatz. Aber Entwickler wollen möglichst strukturiert und mit vielen Sprachfeatures arbeiten. Daher kommen dann weitere Tools zum Einsatz.

Du verwendest ein Framework wie React (Genau kann man es vom Bildschirmfoto her nicht sagen ... so TSX Dateien gibt es auch bei einigen anderen Frameworks wie Next.js, Remix, Garsby, ....)
Dieses Framework ist Komponenten-basiert. Du kannst also diverse Komponenten (Also wiederverwendbare UI Bestandteile) erstellen und verwenden. Diese Komponenten sind dann in den jsx bzw tsx Dateien.
ts statt js: JavaScript hat ein paar Nachteile und daher wurde eine neue Sprache entwickelt: TypeScript. Diese Sprache wird dann in JavaScript übersetzt und kann auch mit JavaScripten interagieren.

Hier wäre es dann wichtig, dass man sich mit den Grundlagen auseinander setzt:

• das Framework sollte man verstehen um dann seine eigene Anwendung strukturiert zu erstellen.
• TypeScript als Sprache muss verstanden werden

Hier ist es dann auch möglich, auf gewisse Grundlagen zu verzichten. So kann man auf viele HTML und CSS Details verzichten in dem man auf vorgefertigte Dinge setzt und diese nur minimal anpasst. Dazu schaut man sich dann sowas wie Templates an. Ich bin in erster Linie Backend Entwickler und wenn ich etwas mit Frontends mache, dann nutze ich z.B. React mit MUI X und da gibt es dann auch Templates.