On this page
Page configurationLifecyclePage parametersGet page instances

Page

A page in Ray is also a React component.

src/pages/index.js
// src/pages/index.js
import { View } from '@ray-js/ray';

const IndexPage = () => {
  return <View>Hello world!</View>;
};

export default IndexPage;

Page configuration

Suppose that the page file is src/pages/index.js. The configuration file of this page is src/pages/index.config.js.

It works the same way as global.config.js. You can export a single configuration by default or platform-specific configuration.

export const web = {
  navigationBarTitleText: 'Account Center',
  backgroundColor: '#f2f4f6',
};

export const tuya = {
  navigationBarTitleText: 'Account Center',
  backgroundColor: '#f2f4f6',
};

export const wechat = {
  navigationBarTitleText: 'Account Center',
  backgroundColor: '#f2f4f6',
};

Lifecycle

For class components, you can listen for the page lifecycle directly on the class.

import React from 'react';
import { View } from '@ray-js/ray';

export default class IndexPage extends React.Component {
  // didMount is triggered on `onLoad`
  componentDidMount() {
    console.log('IndexPage load');
  }
  onShow() {
    console.log('IndexPage show');
  }
  render() {
    return <View>Hello world!</View>;
  }
}

For functional components, you can use hooks to listen for the page lifecycle.

import { View, usePageEvent } from '@ray-js/ray';

export default () => {
  // onShow lifecycle
  usePageEvent('onShow', () => {
    console.log('onShow');
  });
  // onBack callback
  usePageEvent('onBack', () => {
    console.log('onBack');
  });

  return <View>Hello world!</View>;
};

Note The lifecycle callback of the class component can only be used on the page component. Hooks can be used on any functional components.

Page parameters

Ray passes page parameters to the page component through props. Example:

import { View } from '@ray-js/ray';

export default (props) => {
  // Page parameters
  console.log(props.location.query);
  return <View>view</View>;
};

Alternatively, you get the parameters through the miniapp's native method, generally in onLoad event. The same applies to scene values.

Get page instances

Get page instances through getCurrentPages.

import { View, getCurrentPages } from '@ray-js/ray';

export default () => {
  const pages = getCurrentPages();
  return <View>pages: {pages.length}</View>;
};

Note Ray sets internal logic-related properties (including data values) on page instances, so do not modify the properties on the instances.