RN入门教程-1

最新推荐文章于 2022-05-07 17:02:47 发布

原创最新推荐文章于 2022-05-07 17:02:47 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

RN 专栏收录该内容

1 篇文章

订阅专栏

这篇博客详细介绍了如何在原生应用中与React Native（RN）进行交互，包括使用tv?.setOnClickListener进行页面跳转，并在RN页面中创建TypeScriptFile和TypeScriptJSXFile来构建布局。示例代码展示了RN页面的实现，包括导入组件、定义布局及样式。

原生与RN交互

1、原生页面

tv?.setOnClickListener {
    optRouterService<ReactNativeRouterApi<OptRouter>>()
            .getRNRouter(RnModel(page = "ScreenManifest跳转的name值))
            .lunch()
}

2、RN页面

1）创建TypeScript File —

TypeScript File（没有布局 model文件）

TypeScript JSX File （有布局）

2）有布局文件

import CommonPage from "~/base/CommonPage";
import React from "react";
import { Text, View } from "react-native";

export default class TestScreen extends CommonPage<any, any> {
  render() {//在这里写布局
    return (
      <View
        style={{
          flex: 1,
          flexDirection: "column",
          paddingHorizontal: 12,
          paddingTop: 10.5
        }}
      >
        <Text>dfhsfhgffehersagfkkjk</Text>
      </View>
    );
  }
}