React Native开发Android Widget

项目场景：

最近用在react native开发一款app，在桌面小组件的实现上遇到一些问题，做个记录。
技术实现参考：React Native Android Widget

注意将示例中所有yourapppackage换为自己的项目名。

---

问题描述

一、

桌面上无法显示，一添加组件就跳转到新的界面。

二、

添加组件时似乎与桌面无法适配，右边感觉没有完全显示。

---

原因分析：

一、

个人原因，添加了WidgetConfigurationScreen，这一步似乎没有必要。

二、

组件大小问题

---

解决方案：

一、

删去

二、

在android\app\src\main\res\xml\widgetprovider_name.xml文件中修改代码如下：

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:minWidth="300dp"
    android:minHeight="120dp"

    android:updatePeriodMillis="0"

	android:initialLayout="@layout/rn_widget"

    android:previewImage="@drawable/ouc"
    android:description="@string/widget_ouc_description"

    android:resizeMode="none"

    android:widgetCategory="home_screen">
</appwidget-provider>

在name.tsx中修改代码如下：

import React from 'react';
import { FlexWidget, TextWidget } from 'react-native-android-widget';
import { Dimensions } from 'react-native';

const screenwidth = Dimensions.get("window").width
const screenheight = Dimensions.get("window").height

export function OUCWidget() {
  return (
    <FlexWidget
      style={{
        flex:1,
        height: 0.5 * screenwidth,
        width: screenwidth - 50,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ffffff',
        borderRadius: 16,
      }}
    >
      <TextWidget
        text="Hello"
        style={{
          fontSize: 32,
          //fontFamily: 'Inter',
          color: '#000000',
        }}
      />
    </FlexWidget>
  );
}

这样就可以正常显示了。