facebookarchive / react-360

Create amazing 360 and VR content using React
https://facebook.github.io/react-360
Other
8.73k stars 1.22k forks source link

How to get self-defined URL parameters in React VR? #461

Open zzc-tongji opened 6 years ago

zzc-tongji commented 6 years ago

I notice that React VR can read URL parameters like localhost:8081/vr/?hotreload for debugging.

Is it possible for React VR to read self-defined URL parameter? For example, using localhost:8081/vr/?pano=image&color=red to transfer some information from URL to Component.

andrewimm commented 6 years ago

The Location native module (https://github.com/facebook/react-vr/blob/master/ReactVR/js/Modules/Location.js#L41-L49) copies over the values from window.location.

// in react
import {NativeModules} from 'react-vr';

const Location = NativeModules.Location;

console.log(Location.search);
// prints out the query string, including the ?

From there, you can split up the string to extract your parameters.

andrewimm commented 6 years ago

Sorry, I made a typo. That should be NativeModules.Location. I have fixed it above, and confirmed it works in a new app.

zzc-tongji commented 6 years ago

@andrewimm Thank you very much!

zzc-tongji commented 6 years ago

In react-360, NativeModules is not defined.

andrewimm commented 6 years ago

Can you expand? Native Modules should be supported and defined in React 360, as demonstrated in this sample: https://github.com/facebook/react-360/tree/master/Samples/NativeModules

zzc-tongji commented 6 years ago

I got it!

I forget to import NativeModules from react-360.

Forgive my stupid.