{"draftJsState":{"blocks":[{"data":{"image":{"id":"64c6dafcbc598b321aa99c86"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"85ooa"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"fmcnj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как работает виджет?","type":"header-three","key":"cm4gl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Виджет работает как расширение приложения. Он не функционирует как самостоятельное приложение. Виджеты доступны в трех размерах (Small, Medium и Large) и могут быть статичными и настраиваемыми. Виджет ограничен в плане взаимодействия. Его нельзя скроллить, а можно только касаться. Малый виджет может иметь только один тип области взаимодействия, в то время как средний и большой — несколько.","type":"unstyled","key":"cia80"},{"data":{"image":{"id":"64c6db16d27321706fdf9f13"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9k9ae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зачем разрабатывать виджеты?","type":"header-three","key":"62e7i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Виджеты обычно создаются не только для того, чтобы предоставлять важную информацию и доступ к приложению на домашнем экране, но и для того, чтобы выделять приложение на фоне конкурентов и поддерживать вовлеченность пользователей.","type":"unstyled","key":"1eo4f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Виджеты для взаимодействия с React Native","type":"header-three","key":"ee479"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"К сожалению, создать виджет для домашнего экрана с помощью React Native невозможно. Но не волнуйтесь, решение есть! В этом руководстве мы рассмотрим, как использовать нативный виджет для взаимодействия с приложением React Native.","type":"unstyled","key":"d74ss"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":4,"offset":14}],"inlineStyleRanges":[],"text":"Примеры — в этом репозитории.","type":"unstyled","key":"fr51l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настройка","type":"header-three","key":"3dksq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте новое приложение:","type":"ordered-list-item","key":"fifa4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"react-native init RNWidget","type":"blockquote","key":"9dcos"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Добавьте зависимость, которая создаст “мост” между виджетом и приложением:","type":"unstyled","key":"f1fa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"yarn add react-native-shared-group-preferences","type":"blockquote","key":"2eret"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Чтобы достичь взаимодействия с нативным модулем, добавьте следующий код в App.js:","type":"unstyled","key":"73ua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, {useState} from 'react';\nimport {\n View,\n TextInput,\n StyleSheet,\n NativeModules,\n SafeAreaView,\n Text,\n Image,\n ScrollView,\n KeyboardAvoidingView,\n Platform,\n ToastAndroid,\n} from 'react-native';\nimport SharedGroupPreferences from 'react-native-shared-group-preferences';\nimport AwesomeButton from 'react-native-really-awesome-button';\nimport {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';\n\nconst group = 'group.streak';\n\nconst SharedStorage = NativeModules.SharedStorage;\n\nconst App = () => {\n const [text, setText] = useState('');\n const widgetData = {\n text,\n };\n\n const handleSubmit = async () => {\n try {\n // iOS\n await SharedGroupPreferences.setItem('widgetKey', widgetData, group);\n } catch (error) {\n console.log({error});\n }\n const value = `${text} days`;\n // Android\n SharedStorage.set(JSON.stringify({text: value}));\n ToastAndroid.show('Change value successfully!', ToastAndroid.SHORT);\n };\n\n return (\n \n \n \n Change Widget Value\n \n \n \n \n Enter the value that you want to display on your home widget\n \n \n \n \n \n\n setText(newText)}\n value={text}\n keyboardType=\"decimal-pad\"\n placeholder=\"Enter the text to display...\"\n />\n\n \n Submit\n \n \n \n \n \n );\n};\n\nexport default App;\n\nconst styles = StyleSheet.create({\n safeAreaContainer: {\n flex: 1,\n width: '100%',\n backgroundColor: '#fafaf3',\n },\n container: {\n flex: 1,\n width: '100%',\n padding: 12,\n },\n heading: {\n fontSize: 24,\n color: '#979995',\n textAlign: 'center',\n },\n input: {\n width: '100%',\n // fontSize: 20,\n minHeight: 50,\n borderWidth: 1,\n borderColor: '#c6c6c6',\n borderRadius: 8,\n padding: 12,\n },\n bodyContainer: {\n flex: 1,\n margin: 18,\n },\n instructionContainer: {\n margin: 25,\n paddingHorizontal: 20,\n paddingTop: 30,\n borderWidth: 1,\n borderRadius: 12,\n backgroundColor: '#ecedeb',\n borderColor: '#bebfbd',\n marginBottom: 35,\n },\n avatarImg: {\n height: 180,\n width: 180,\n resizeMode: 'contain',\n alignSelf: 'flex-end',\n },\n thoughtContainer: {\n minHeight: 50,\n borderRadius: 12,\n borderWidth: 1,\n padding: 12,\n backgroundColor: '#ffffff',\n borderColor: '#c6c6c6',\n },\n thoughtPointer: {\n width: 0,\n height: 0,\n borderStyle: 'solid',\n overflow: 'hidden',\n borderTopWidth: 12,\n borderRightWidth: 10,\n borderBottomWidth: 0,\n borderLeftWidth: 10,\n borderTopColor: 'blue',\n borderRightColor: 'transparent',\n borderBottomColor: 'transparent',\n borderLeftColor: 'transparent',\n marginTop: -1,\n marginLeft: '50%',\n },\n thoughtTitle: {\n fontSize: 14,\n },\n actionButton: {\n marginTop: 40,\n },\n});","type":"blockquote","key":"5fit4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":211,"style":"BOLD"},{"length":8,"offset":217,"style":"BOLD"},{"length":6,"offset":228,"style":"BOLD"},{"length":9,"offset":266,"style":"BOLD"},{"length":10,"offset":291,"style":"BOLD"},{"length":9,"offset":357,"style":"BOLD"}],"text":"Рассмотрим, как использовать SharedGroupPreferences и SharedStorage в приложении. SharedGroupPreferences импортируется из библиотеки. Его можно использовать, сохраняя элемент с помощью метода setItem, используя ключ, значение и группу. В данном примере ключом будет widgetKey, значением — widgetData, объект JavaScript, содержащий пользовательский ввод, а группой — имя группы, которая будет обмениваться информацией между приложением и виджетом. Поговорим об этом подробнее, когда перейдем к коду на Swift.","type":"unstyled","key":"aadmp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для Android будем использовать SharedStorage. Не нужно устанавливать никаких дополнительных библиотек, так как SharedStorage включен в пакет React Native. Значение будет представлять собой сериализованный объект JavaScript, который преобразуется в строку и сохранится с помощью метода set SharedStorage.","type":"unstyled","key":"4sojn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, работаем с нативным кодом.","type":"unstyled","key":"6fvbj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Реализация для iOS","type":"header-three","key":"hj08"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте проект приложения в Xcode и выберите File > New > Target.","type":"unstyled","key":"3o9vr"},{"data":{"image":{"id":"64c6db1642602d50da09f3ec"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3dnlo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. В группе Application Extension выберите Widget Extension, а затем нажмите Next.","type":"unstyled","key":"e5u0p"},{"data":{"image":{"id":"64c6db16c4272158386aab24"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"b8540"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Введите имя расширения.","type":"unstyled","key":"63tb4"},{"data":{"image":{"id":"64c6db16717d9d3ccfb374d4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"b94te"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Если виджет предоставляет настраиваемые пользователем свойства, отметьте галочкой Include Configuration Intent.","type":"unstyled","key":"29unf"},{"data":{"image":{"id":"64c6db16d22d1354d9d8ff98"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ccvfs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Нажмите Finish.","type":"unstyled","key":"a3kl8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6. Если появится запрос на активацию схемы, нажмите Activate.","type":"unstyled","key":"2gbbo"},{"data":{"image":{"id":"64c6db1641a283118346b780"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"60gl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7. Виджет готов к работе! Теперь у вас есть новая папка, содержащая все необходимые файлы для виджета.","type":"unstyled","key":"9qbd3"},{"data":{"image":{"id":"64c6db1715168172516778d9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"62re5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8. Прежде чем перейти к следующему шагу, протестируйте базовый виджет. Для этого просто откройте терминал и запустите приложение с помощью следующей команды:","type":"unstyled","key":"4uevd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"react-native run-ios","type":"blockquote","key":"83i93"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9. Чтобы добавить виджет, нужно нажать и удерживать домашний экран, пока в левом верхнем углу не появится значок “+”. При нажатии на него появится список приложений, где должно быть недавно созданное.","type":"unstyled","key":"cujbs"},{"data":{"image":{"id":"64c6db17512df932790b8e78"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e7ecl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10. Для взаимодействия с виджетом React Native необходимо добавить “App Group”.","type":"unstyled","key":"8o23j"},{"data":{"image":{"id":"64c6db177e18301054fabe70"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"30gq6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11. Далее для виджета Streak отредактируйте файл StreakWidget.swift с помощью следующего кода:","type":"unstyled","key":"4je7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import WidgetKit\nimport SwiftUI\nimport Intents\n\nstruct WidgetData: Decodable {\n var text: String\n}\n\nstruct Provider: IntentTimelineProvider {\n func placeholder(in context: Context) -> SimpleEntry {\n SimpleEntry(date: Date(), configuration: ConfigurationIntent(), text: \"Placeholder\")\n }\n \n func getSnapshot(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (SimpleEntry) -> ()) {\n let entry = SimpleEntry(date: Date(), configuration: configuration, text: \"Data goes here\")\n completion(entry)\n }\n \n func getTimeline(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (Timeline) -> Void) {\n let userDefaults = UserDefaults.init(suiteName: \"group.streak\")\n if userDefaults != nil {\n let entryDate = Date()\n if let savedData = userDefaults!.value(forKey: \"widgetKey\") as? String {\n let decoder = JSONDecoder()\n let data = savedData.data(using: .utf8)\n if let parsedData = try? decoder.decode(WidgetData.self, from: data!) {\n let nextRefresh = Calendar.current.date(byAdding: .minute, value: 5, to: entryDate)!\n let entry = SimpleEntry(date: nextRefresh, configuration: configuration, text: parsedData.text)\n let timeline = Timeline(entries: [entry], policy: .atEnd)\n completion(timeline)\n } else {\n print(\"Could not parse data\")\n }\n } else {\n let nextRefresh = Calendar.current.date(byAdding: .minute, value: 5, to: entryDate)!\n let entry = SimpleEntry(date: nextRefresh, configuration: configuration, text: \"No data set\")\n let timeline = Timeline(entries: [entry], policy: .atEnd)\n completion(timeline)\n }\n }\n }\n}\n\nstruct SimpleEntry: TimelineEntry {\n let date: Date\n let configuration: ConfigurationIntent\n let text: String\n}\n\nstruct StreakWidgetEntryView : View {\n var entry: Provider.Entry\n \n var body: some View {\n HStack {\n VStack(alignment: .leading, spacing: 0) {\n HStack(alignment: .center) {\n Image(\"streak\")\n .resizable()\n .aspectRatio(contentMode: .fit)\n .frame(width: 37, height: 37)\n Text(entry.text)\n .foregroundColor(Color(red: 1.00, green: 0.59, blue: 0.00))\n .font(Font.system(size: 21, weight: .bold, design: .rounded))\n .padding(.leading, -8.0)\n }\n .padding(.top, 10.0)\n .frame(maxWidth: .infinity)\n Text(\"Way to go!\")\n .foregroundColor(Color(red: 0.69, green: 0.69, blue: 0.69))\n .font(Font.system(size: 14))\n .frame(maxWidth: .infinity)\n Image(\"duo\")\n .renderingMode(.original)\n .resizable()\n .aspectRatio(contentMode: .fit)\n .frame(maxWidth: .infinity)\n \n }\n }\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n }\n}\n\n@main\nstruct StreakWidget: Widget {\n let kind: String = \"StreakWidget\"\n \n var body: some WidgetConfiguration {\n IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: Provider()) { entry in\n StreakWidgetEntryView(entry: entry)\n }\n .configurationDisplayName(\"My Widget\")\n .description(\"This is an example widget.\")\n }\n}\n\nstruct StreakWidget_Previews: PreviewProvider {\n static var previews: some View {\n StreakWidgetEntryView(entry: SimpleEntry(date: Date(), configuration: ConfigurationIntent(), text: \"Widget preview\"))\n .previewContext(WidgetPreviewContext(family: .systemSmall))\n }\n}","type":"blockquote","key":"bv1pl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Основные моменты:","type":"unstyled","key":"ea8lk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Считывание объекта UserDefaults из общей группы, созданной ранее:","type":"unordered-list-item","key":"f1ubv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let userDefaults = UserDefaults.init(suiteName: \"group.streak\")","type":"blockquote","key":"2hpg2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получение данных (которые были закодированы в строковой форме):","type":"unordered-list-item","key":"241mb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let savedData = userDefaults!.value(forKey: \"widgetKey\")","type":"blockquote","key":"9ge3h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Декодирование в объект:","type":"unordered-list-item","key":"cbkdk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let parsedData = try? decoder.decode(WidgetData.self, from: data!)","type":"blockquote","key":"4erk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание таймлайна указанных объектов:","type":"unordered-list-item","key":"bjp1c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let nextRefresh = Calendar.current.date(byAdding: .minute, value: 5, to: entryDate)!","type":"blockquote","key":"8jepg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объекты, добавленные в структуру Timeline, должны соответствовать протоколу TimelineEntry, предписывающему им иметь поле Date и ничего больше. Это важная информация, которую следует запомнить.","type":"unstyled","key":"8oa1t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это все, что нужно для iOS. Просто запустите npm start и протестируйте приложение на виртуальном или реальном устройстве.","type":"unstyled","key":"fj6tp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После установки приложения останется только выбрать виджет из списка виджетов и поместить его на домашний экран.","type":"unstyled","key":"c1vov"},{"data":{"image":{"id":"64c6db1888f7ba2f7e6fcba3"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5mlma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем откройте приложение и введите что-нибудь в поле ввода, нажмите Enter и вернитесь на домашний экран.","type":"unstyled","key":"73ceb"},{"data":{"image":{"id":"64c6db18232fb31107dbf596"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"eg48h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот и все. Теперь посмотрим, как проделать то же самое на Android.","type":"unstyled","key":"8u12c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"},{"length":22,"offset":0,"style":"ITALIC"}],"text":"Реализация для Android","type":"header-three","key":"2i7to"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте папку Android в Android Studio. Затем в Android Studio щелкните правой кнопкой мыши на res > New > Widget > App Widget.","type":"ordered-list-item","key":"2gdbh"},{"data":{"image":{"id":"64c6db1932791f049acbd515"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"61r30"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Назовите и настройте виджет, далее нажмите кнопку Finish.","type":"unstyled","key":"48otc"},{"data":{"image":{"id":"64c6db19bc598b321aa9b5c4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1bclo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Теперь запустите приложение. Вы увидите доступный виджет.","type":"unstyled","key":"eq4vh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Для взаимодействия между виджетом и приложением React Native будем использовать нативный модуль SharedPreferences для Android, играющий такую же роль, что и UserDefaults для iOS.","type":"unstyled","key":"d73bs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот пункт включает в себя добавление новых файлов SharedStorage.java и SharedStoragePackager.java в общий каталог с MainApplication.java.","type":"unstyled","key":"3nbtc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"SharedStorage.java:","type":"unstyled","key":"ca5vm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"package com.rnwidget;\n\nimport com.facebook.react.bridge.NativeModule;\nimport com.facebook.react.bridge.ReactApplicationContext;\nimport com.facebook.react.bridge.ReactContext;\nimport com.facebook.react.bridge.ReactContextBaseJavaModule;\nimport com.facebook.react.bridge.ReactMethod;\n\nimport android.app.Activity;\nimport android.appwidget.AppWidgetManager;\nimport android.content.ComponentName;\nimport android.content.Context;\nimport android.content.Intent;\nimport android.content.SharedPreferences;\nimport android.util.Log;\n\npublic class SharedStorage extends ReactContextBaseJavaModule {\n ReactApplicationContext context;\n\n public SharedStorage(ReactApplicationContext reactContext) {\n super(reactContext);\n context = reactContext;\n }\n\n @Override\n public String getName() {\n return \"SharedStorage\";\n }\n\n @ReactMethod\n public void set(String message) {\n SharedPreferences.Editor editor = context.getSharedPreferences(\"DATA\", Context.MODE_PRIVATE).edit();\n editor.putString(\"appData\", message);\n editor.commit();\n\n Intent intent = new Intent(getCurrentActivity().getApplicationContext(), StreakWidget.class);\n intent.setAction(AppWidgetManager.ACTION_APPWIDGET_UPDATE);\n int[] ids = AppWidgetManager.getInstance(getCurrentActivity().getApplicationContext()).getAppWidgetIds(new ComponentName(getCurrentActivity().getApplicationContext(), StreakWidget.class));\n intent.putExtra(AppWidgetManager.EXTRA_APPWIDGET_IDS, ids);\n getCurrentActivity().getApplicationContext().sendBroadcast(intent);\n\n }\n}","type":"blockquote","key":"8re3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"SharedStoragePackager.java:","type":"unstyled","key":"5jk6o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"package com.rnwidget;\n\nimport com.facebook.react.ReactPackage;\nimport com.facebook.react.bridge.JavaScriptModule;\nimport com.facebook.react.bridge.NativeModule;\nimport com.facebook.react.bridge.ReactApplicationContext;\nimport com.facebook.react.uimanager.ViewManager;\n\nimport java.util.ArrayList;\nimport java.util.Collections;\nimport java.util.List;\n\npublic class SharedStoragePackager implements ReactPackage {\n\n @Override\n public List createViewManagers(ReactApplicationContext reactContext) {\n return Collections.emptyList();\n }\n\n @Override\n public List createNativeModules(ReactApplicationContext reactContext) {\n List modules = new ArrayList<>();\n\n modules.add(new SharedStorage(reactContext));\n\n return modules;\n }\n\n}","type":"blockquote","key":"60qs7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Измените название пакета для приложения, как показано в файле AndroidManifest.xml по пути android > app > src > main.","type":"unstyled","key":"d54lf"},{"data":{"image":{"id":"64c6db19c1a61610b1aa6f51"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9cpho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6. После внесения этих изменений добавьте этот код в файл MainApplication.java в методе getPackages.","type":"unstyled","key":"cdhr7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"packages.add(new SharedStoragePackager());","type":"blockquote","key":"82vkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7. Настроив “мост”, перейдем к приему данных в StreakWidget.java. Чтобы обновить контент виджета, используйте SharedPreferences, применяя в качестве средства управления updateAppWidget. Вот код для обновления:","type":"unstyled","key":"1jan6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"package com.rnwidget;\n\nimport android.appwidget.AppWidgetManager;\nimport android.appwidget.AppWidgetProvider;\nimport android.content.Context;\nimport android.widget.RemoteViews;\nimport android.content.SharedPreferences;\n\nimport org.json.JSONException;\nimport org.json.JSONObject;\n\n/**\n * Внедрение функциональности App Widget.\n */\npublic class StreakWidget extends AppWidgetProvider {\n static void updateAppWidget(Context context, AppWidgetManager appWidgetManager,\n int appWidgetId) {\n\n try {\n SharedPreferences sharedPref = context.getSharedPreferences(\"DATA\", Context.MODE_PRIVATE);\n String appString = sharedPref.getString(\"appData\", \"{\\\"text\\\":'no data'}\");\n JSONObject appData = new JSONObject(appString);\n RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.streak_widget);\n views.setTextViewText(R.id.appwidget_text, appData.getString(\"text\"));\n appWidgetManager.updateAppWidget(appWidgetId, views);\n }catch (JSONException e) {\n e.printStackTrace();\n }\n }\n\n @Override\n public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {\n // Возможно, активны несколько виджетов, поэтому обновите их все.\n for (int appWidgetId : appWidgetIds) {\n updateAppWidget(context, appWidgetManager, appWidgetId);\n }\n }\n\n @Override\n public void onEnabled(Context context) {\n // Введите соответствующую функциональность для момента создания первого виджета.\n }\n\n @Override\n public void onDisabled(Context context) {\n // Введите соответствующую функциональность для момента отключения последнего виджета. \n }\n}","type":"blockquote","key":"85htk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8. Теперь поговорим о внешнем виде виджета. Этот шаг необязателен, но мы будем использовать тот же дизайн, что и в примере с iOS. В Android Studio перейдите к файлу app > res > layout > streak_widget.xml. Можете ознакомиться с предварительным просмотром дизайна следующим образом:","type":"unstyled","key":"c14mi"},{"data":{"image":{"id":"64c6db1b8d053f1fb1ccb714"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fivj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9. Запустите результат в тестовом режиме на устройстве Android:","type":"unstyled","key":"1q96a"},{"data":{"image":{"id":"64c6db1bd22d1354d9d902f8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a3qe4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы научились создавать AppWidget с помощью React Native. Даже если эта тема для вас нова, не волнуйтесь — вы легко справитесь с добавлением виджетов в ваши приложения.","type":"unstyled","key":"5jatj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"cmbus"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":52,"offset":0}],"inlineStyleRanges":[],"text":"Как оптимизировать настройку приложений React Native","type":"unordered-list-item","key":"8gauu"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":43,"offset":0}],"inlineStyleRanges":[],"text":"Как построить надежную фронтенд-архитектуру","type":"unordered-list-item","key":"ddcqb"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":70,"offset":0}],"inlineStyleRanges":[],"text":"5 лучших курсов по React Native для разработчиков мобильных приложений","type":"unordered-list-item","key":"3upiq"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":8,"offset":14},{"key":6,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"bvd4q"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":13,"offset":15},{"key":8,"length":79,"offset":30}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Rushit Jivani: React Native: Ultimate Guide to Create a Home Screen Widget for iOS and Android","type":"unstyled","key":"6lj68"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"yabp4SNiIMznnxel6UnH"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/18323/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://github.com/Rushit013/RNWidget.git","url":"https://github.com/Rushit013/RNWidget.git"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://nuancesprog.ru/p/17034/","url":"https://nuancesprog.ru/p/17034/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://nuancesprog.ru/p/18217/","url":"https://nuancesprog.ru/p/18217/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://nuancesprog.ru/p/2152/","url":"https://nuancesprog.ru/p/2152/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://medium.com/@rushitjivani","url":"https://medium.com/@rushitjivani"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://levelup.gitconnected.com/react-native-ultimate-guide-to-create-a-home-screen-widget-for-ios-and-android-83708dc1844c","url":"https://levelup.gitconnected.com/react-native-ultimate-guide-to-create-a-home-screen-widget-for-ios-and-android-83708dc1844c"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}