Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

NodesRef: setNativeProps() method

Directly set the attributes of the selected node.

When should you use setNativeProps?

When you have to refresh frequently and encounter performance bottlenecks.

Directly operating components is not a tool that should be used often. Generally, it is only used to create continuous animations, while avoiding the large overhead brought about by rendering component structures and synchronizing too many view changes. setNativeProps is a "simple and crude" method, it directly records the state at element instead of in the Lynx component, which makes the code logic difficult to understand. So before using this method, please try to solve the problem with useState method first.

Syntax

setNativeProps(nativeProps: Record<string, any>): SelectorQuery;

Parameters

nativeProps

A Record<string, any>, describes the properties that need to be set. Properties can be any attribute of the UI node, including CSS properties and attributes.

Note that style cannot be set as a whole (the key of nativeProps cannot be style).

Return Value

Contains the SelectorQuery object for this task. Call exec() to execute the task.

Examples

  1. Set the text content of the text node.
function App() {
  return (
    <view
      bindtap={() => {
        lynx
          .createSelectorQuery()
          .select('#intro')
          .setNativeProps({
            text: 'Hello, Lynx!',
          })
          .exec();
      }}
    >
      <text id="intro">Hello, World!</text>
    </view>
  );
}
  1. Set the upper-threshold attribute of <scroll-view />.
function App() {
  return (
    <scroll-view id="intro">
      <text
        bindtap={() => {
          lynx
            .createSelectorQuery()
            .select('#intro')
            .setNativeProps({
              'upper-threshold': '10px',
            })
            .exec();
        }}
      >
        Hello, World!
      </text>
    </scroll-view>
  );
}
  1. Set the background color of the <view />.
function App() {
  return (
    <view id="intro">
      <text
        bindtap={() => {
          lynx
            .createSelectorQuery()
            .select('#intro')
            .setNativeProps({
              'background-color': 'red',
            })
            .exec();
        }}
      >
        Hello, World!
      </text>
    </view>
  );
}
  1. Modify the transform properties
function App() {
  return (
    <view
      bindtap={() => {
        lynx
          .createSelectorQuery()
          .select('#intro')
          .setNativeProps({
            transform: 'translateY(3px)',
          })
          .exec();
      }}
    >
      <text id="intro">Hello, World!</text>
    </view>
  );
}

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.