Prepare
Magic Leap One
https://www.magicleap.com/magic-leap-one
mlsdk v.0.20.0
https://creator.magicleap.com/downloads/lumin-sdk/overview
magic-script-cli v2.0.1
https://www.npmjs.com/package/magic-script-cli
magic-script-polyfills v2.2.0
https://www.npmjs.com/package/magic-script-polyfills
magic-script-components v0.0.9
https://www.npmjs.com/package/magic-script-components
Create Project
magic-script init my-list org.magicscript.list "List Component"
cd my-list
Install
npm install
npm install magic-script-components
npm install --save-dev @babel/core @babel/plugin-transform-react-jsx rollup-plugin-babel
Code
Create a new .babelrc file
{
"plugins": [
"@babel/plugin-syntax-jsx",
"@babel/plugin-transform-react-jsx"
]
}
Change rollup.config.js
// Rollup config for consuming some npm modules in MagicScript
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default {
external: ['uv', 'lumin', 'ssl'],
input: 'src/main.js',
preserveModules: true,
output: {
dir: 'bin',
format: 'es'
},
plugins: [
babel({exclude: "node_modules/**"}),
resolve(),
commonjs()]
};
Change app.js
import React from 'react';
import { CustomListView } from './components/index.js';
export class MyApp extends React.Component {
constructor(props) {
super(props);
this.items = [
'01', '02', '03', '04', '05', '06', '07', '08', '09', '10',
'11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
'21', '22', '23', '24', '25', '26', '27', '28', '29', '30',
];
}
render() {
return (
<view name='main-view'>
<CustomListView items={this.items} ></CustomListView>
</view>
);
}
}
Create components folder in src folder.
Create index.js newly in components folder.
export { default as CustomListView } from './custom-listview.js';
Create custom-listview.js newly in components folder.
import React from 'react';
export default class CustomListView extends React.Component {
constructor(props) {
super(props);
this.items = props.items;
}
render() {
let i = 0;
let viewItems = [];
for (; i < this.items.length; i++)
{
viewItems.push(
<listViewItem>
<text textSize={0.10} textColor={[0.1, 1, 0.1, 0.84]}>{this.items[i]}</text>
</listViewItem>
);
}
return (
<listView width={0.5} height={0.5}>
{viewItems}
</listView>
);
}
}
Create global-scope.js newly in src folder.
globalThis.process = { env: { NODE_ENV:"development" } };
export default process;
Change main.js
// Add support for things like setTimeout, setInterval and fetch.
// Simply importing this sets all these as global definitions.
// They are declared in the .eslintrc so your editor won't complain.
import 'magic-script-polyfills';
import './global-scope.js';
import React from 'react';
import mxs from 'magic-script-components';
// Load main app logic from the app class.
import { MyApp } from './app.js';
mxs.bootstrap(<MyApp type='landscape' volumeSize={[1,1,1]} caption='MagicScript CustomList'/>);
Build
magic-script build -i
Run
magic-script run --port=10000
Reference
UiListView(Magic Script API Doc)
https://docs.magicscript.org/lumin.ui.UiListView.html
Lists (UiListView)(Guide C++)
https://creator.magicleap.com/learn/guides/luminrt-uilistview
magic-script-components (Github)
https://github.com/magic-script/magic-script-components
magicscript
https://www.magicscript.org/
Thanks!