JavaScript React Native Handy Bewegung abfragen?

[DreamGamer]

Hallo, ich würde gerne mit React Native abfragen, wann und wie ich mein Handy drehe. Also z.b. für eine Lenkrad Drehung. Wäre so etwas möglich? Oder müsste ich dafür eine andere Sprache nehmen?

MFG DreamGamer

 

[Crast]

Das ist möglich.

Das was dich interessiert ist die Device Orientation.
Einen umfangreicheren Artikel dazu findest du u. A. im MDN.
Letztenndlich hörst du auf das "deviceorientation" event.

window.addEventListener("deviceorientation", handleOrientation, true);

function handleOrientation(event) {
  var absolute = event.absolute;
  var alpha    = event.alpha;
  var beta     = event.beta;
  var gamma    = event.gamma;

  // Do stuff with the new orientation data
}

Was du mit diesen Werten nun machst ist dir überlassen. Auch eine Lenkradsteuerung ist möglich.

Emulieren kannst du dies besonders gut im Chromium Browser (alternativ Google Chrome).
Dafür öffnest du die DevTools und wählst im Menü (oben rechts, drei Punkte) unter "More tools" den Punkt "Sensors" aus. Wählst du nun bei Orientation die Option Custom orientation... kannst du ein Virtuelles Device drehen.

Für ausführliche Test empfiehlt sich allerdings bereits die Installation von Android Studio, da dort eine bessere Emulation gemacht werden kann. Auch für unterschiedliche Hardware (emuliert) und Android-Versionen.

Aber beachte! Es gibt hier zwischen den Browsern ein paar unterschiede wie die Werte zu interpretieren sind.

 

[DreamGamer]

@Crast ist dies nicht für die Web version? Ich meine für eine Handy APP. Weil soweit ich weiß gibt es die windows.addEventListener funktion doch garnicht in React Native für APPS oder?

 

[Xenons]

Android and java? https://developer.android.com/guide/topics/sensors/sensors_motion

 

[DreamGamer]

@Xenons genau soetwas suche ich gibt es soetwas denn für React Native in der APP Version? Oder sollte ich dann lieber eine andere Platform zur entwicklung benutzen?

 

[Xenons]

@DreamGamer google react native gyroscope. Keine Ahnung warum man JavaScript verwenden möchte jedoch warum auch nicht wenn es existiert.
Falls google keine sinnvollen Ergebnisse liefert geht das entweder umständlich oder garnicht.

 

[Crast]

@DreamGamer
Ja, mein Fehler. Hatte ab irgendeinen Zeitpunkt das Nativ verdrängt, sorry.

 

[psYcho-edgE]

@DreamGamer schau mal nach der Lib react-native-sensors. Damit hast du Zugriff auf das Gyroskop, den Beschleunigungssensor und auch auf Magnetometer.

Hier wird ein Beispiel für die Verwendung gezeigt.

 

[DreamGamer]

Die Libary React-Native-Sensor klingt genau nach dem, was ich suche. Aber sobald ich diese nutzen möchte kommt:

Unable to resolve "react-native-sensors" from "App.js"

Dies hatte ich schon ein paar mal bei anderen Libarys. Weiß einer weshalb?


So Importiere ich es im Header:

import { Accelerometer } from "react-native-sensors";

Ergänzung (20. November 2018)

Ok ich bin dumm. Ich sollte die Libarys vllt. auch Installieren. Soweit denken sollte ich eig. ._.

 

[DreamGamer]

Ich habe jetzt die Fehlermeldung in der APP:

native modules for sensors not available. did react-native link run successfully

Weiß einer weshalb? Ich habe die Libary verlinkt sie ist auch im Projekt.

 

[psYcho-edgE]

Wirklich ordentlich verlinkt? Also per Konsolenbefehl?

Schau nochmal hier:
https://facebook.github.io/react-native/docs/linking-libraries-ios

 

[DreamGamer]

OMG @psYcho-edgE du könntest meine Rettung sein ich Verzweifel seit 20 Uhr an diesem Fehler ._. Ich habe die Libary so Installiert:

npm install react-native-sensors --save

react-native link react-native-sensors

Und dann sollte es doch eig. verlinkt sein oder nicht? Es ist auf jedemfall unter node_modules im Projekt Ordner.

 

[psYcho-edgE]

Gibt es evtl Beschränkungen bezüglich der Kompatibilität von Versionen der Library und Versionen von RN?

 

[DreamGamer]

@psYcho-edgE woran merkt man dies denn? Ich habe aktuell diese React Native Version:
react-native-cli: 2.0.1
react-native: 0.57.1

Und bei React-Native-Sensor steht:

React Native Version | react-native-sensors Version
<= 39                    < 1.0
>= 40                    >= 1.0

Aber wofür steht dies genau?

 

[psYcho-edgE]

Naja, dass du mit Version RN (0.)57 eine aktuelle Version von RNSensors nehmen kannst. Sollte aber bereits auch passen.

Komisch. Hast du das mit dem Podfile gemacht? Kenn mich nicht so aus mit Entwicklung in RN, deshalb frag mich nicht was das ist, aber es stand in den Installationsanweisungen auf GitHub

Ansonsten fällt mir nix anderes ein als alles zurücksetzen, nochmal genau nach Anleitung installieren und wenn es immer noch nicht geht direkt bei GitHub im Repository das Problem melden. Ich würde jetzt mal schlafen gehen, viel Erfolg

 

[DreamGamer]

Ist Podfile nicht nur für die IOS nutzung?

Ergänzung (21. November 2018)

Oh ohhhh cocopod ist nur für IOS das normale muss man auch bei Windows ausführen oh ups My bad ich probiere es mal schnell und hoffe, dass es dann funktioniert

Ergänzung (21. November 2018)

Ich kann zwar pod benutzen bei Windows aber entweder bekomme ich es nicht hin oder es ist doch nur für IOS. Denn ich weiß nicht, welche podfile gemeint ist diese gibt es doch nur bei IOS genauso wie den "pod install" befehl, oder nicht? Und @psYcho-edgE Danke für deine Hilfe und dann mal Gute Nacht ^^ Ich gehe jetzt auch mal lieber denn ich muss um 7 Uhr schon raus

 

[psYcho-edgE]

Hast du mal versucht RNSensors manuell hinzuzufügen? Oder das ganze Projekt neu aufzusetzen?

 

[cx01]

Hast du die App neu kompiliert nach dem Aufruf von "react-native link"?

Das geht entweder per "react-native run-android" oder halt indem du das Projekt in Android Studio öffnest und dann STRG+F5 oder den grünen Play-Knopf drückst.

Falls das nicht hilft, würde ich in der Anleitung von react-native-sensors die Schritte für eine "Manual Installation" befolgen, da das mit "react-native link" nicht immer 100% funktioniert.

 

[DreamGamer]

@psYcho-edgE wie füge ich dies denn bitte hinzu? Ich benutze ja React Native mit Node JS und Expo ganz normal auf meinen Handys. Ich habe also kein XCode und keine Android datein, oder nicht? Und Projekt neu aufsetzten werde ich gleich mal probieren. @cx01 Und wie react-native run-android? Sollte man Android aufsetzten? Denn ich arbeite nur mit NodeJS und Expo aktuell.

 

[cx01]

Du hattest nicht erwähnt, dass du Expo benutzt. Hier ist das alles ein wenig anders als in purem React Native. Du kannst, soweit ich weiß, nicht einfach so native Module einbinden.

Allerdings hat Expo bereits die Fähigkeit eingebaut, um aufs Gyroskop und den Accelerometer zuzugreifen:
https://docs.expo.io/versions/v31.0.0/sdk/gyroscope
https://docs.expo.io/versions/v31.0.0/sdk/accelerometer