#Ray Development FAQs

#How to open an external browser?

• You can use openURL to open an external browser.

#Ray development does not report any errors, but the page display does not meet expectations. What should I do?

• Ray development, related code does not meet expectations, such as Tabbar configuration does not work, etc., the compilation log does not report an error, please try to upgrade the Ray version, IDE version.

#An error occurred when importing a third-party library into Ray

Possible causes:

• Version incompatibility

  • Ensure that the third-party libraries you import are compatible with Ray and other libraries. Different library versions may have conflicting APIs or dependencies.

• Operating environment

  • The limitations of operating environments can cause certain browser APIs or global objects to not work on the miniapp. For example, directly use AntD or ECharts in the Ray framework.
  • You can directly use libraries that do not manipulate browser objects, such as Lodash and Redux.

• Troubleshooting:

  • The error messages can help you identify issues. Error messages show the issue file, line number, and type of error.

• Community support:

  • If you encounter any issues, you can check the GitHub pages of the community or third-party libraries for solutions or updates.

#Can I use React features like Hooks, Redux, and Dva?

Yes, you can.

#Can I use React DOM libraries like Ant Design and Ant Design Mobile?

No, you cannot.

The MiniApp does not have a DOM, so it does not support any React DOM based UI libraries.

#How can I quickly develop UI components without the ready-to-use web UI libraries?

Ray supports native component libraries. For more information, see Hybrid Development.

#The page lifecycle is not invoked due to the use of a higher-order component (HOC). How to fix it?

If you use the connect function from Redux, set the option.forwardRef of connect to true. For more information, see React Redux. This solution also works for advanced components from other third-party libraries.

For class components, Ray gets the page lifecycle through ref. If a page component is wrapped with a HOC, Ray gets the outermost component of the HOC instead of the wrapped component. In this case, React.forwardRef is required to forward ref to the internal component.

import React, { forwardRef } from 'react';
import { View } from '@ray-js/ray';
class IndexPage extends React.Component {
  onReady() {
    console.log('onReady is called');
  }
  render() {
    return <View>This is an example</View>;
  }
}
// The HOC container is a functional component
const HOC = (Component) => {
  const Wrapped = (props, ref) => {
    // The logic for advanced components
    return <Component {...props} ref={ref} />;
  };
  return forwardRef(Wrapped);
};
// In another case, the HOC container is a class component.
const ClazzHOC = (Component) => {
  class Wrapped extends React.Component {
    // The logic for advanced components
    render() {
      const { forwardRef, ...rest } = this.props;
      return <Component {...rest} ref={forwardRef} />;
    }
  }
  // Compared with the first case, the processing here is a little more complex.
  return forwardRef((props, ref) => <Wrapped {...props} forwardRef={ref} />);
};
// `onReady` The pages exported in the following three ways can call `onReady` as expected.
export default ClazzHOC(IndexPage);
// export default HOC(IndexPage);
// export default IndexPage;

#I get an error saying Path Not Found after the miniapp is built. How to fix it?

Delete the build directory and try to build the miniapp again.

#What is the difference between Ray and Taro?

Taro 3.0 works basically the same way as Ray. They differ in two aspects:

• Multi-platform compatibility: Ray focuses on the key features of the framework and provides a homogeneous multi-platform mechanism with a lean multi-platform implementation (@ray-js/components) to help you build miniapps across different platforms as needed.
• React-focused: React is one of the most popular and widely used frontend frameworks, and React will stay focused on the React stacks to provide more innovative features.