Я почти уверен, что это мой первый вопрос, который я публикую здесь, поэтому надеюсь, что сделаю это правильно и предоставлю всю необходимую информацию.
Контекст: h3>
Это двойной личный проект. Я создаю это приложение исключительно для себя и своего партнера, поэтому никаких серьезных ограничений нет, и я открыт для всех предложений и рекомендаций. Мы с ней часто путешествуем и говорим на нескольких иностранных языках, но мы оба по-прежнему учимся больше каждый день и хотим иметь персонализированное приложение, которым мы могли бы пользоваться и делиться вместе, поэтому я начал создавать это приложение для наших навыков общения и развития языковых навыков.< /p>
Этот проект также предоставляет мне прекрасную возможность изучить и развить свои навыки работы с React Native и нативной разработкой на Kotlin/Swift (некоторое время я пробовал JavaFx, но у меня полный опыт разработки). -time интерфейсный веб-разработчик, поэтому React Native кажется гораздо более естественным подходом для разработки пользовательского интерфейса, а Kotlin/Swift — для нативной и серверной части).
По сути, это просто учебное приложение, сочетающее в себе функции Мне нравятся Quizlet, Anki, Pimsleur и т. д., а также объединение некоторых функций чата, среди прочего, но это выходит за рамки данной проблемы. Пожалуйста, ознакомьтесь с моей формулировкой основной проблемы.
Постановка проблемы:
У меня все еще возникает проблема с панелью состояния в верхней части экрана. оставляя пустое пространство после его скрытия. Эта проблема сохраняется, несмотря на все, что я уже пробовал и исследовал.
Цель:
Я хочу, чтобы на этом дисплее отображался тот цвет фона, который мне нужен. когда StatusBar скрыт, или ImageBackground в зависимости от того, на каком действии/экране он находится. т. е. в верхней части экрана нет пустого пространства или выреза.
Что я уже пробовал:
Я я уже попробовал фоновый цвет как прозрачный и установил для свойства translucent значение true.
В app.json я пытался настроить его на использование темного цвета для свойства userInterfaceStyle.
Я пробовал использовать пакет response-native-safe-area-context с их SafeAreaProvider для всего приложения и использовал SafeAreaView вокруг самого компонента (я знаю, что обычный SafeAreaView предназначен только для iOS, а мне он нужен специально для Android, я просто подумал, возможно, стоит попробовать этот контекстный пакет).
Установите для фона черный цвет
Установите стиль на темный, а для barStyle – на темный контент
< li>Я пробовал использовать expo-status-bar и response-native StatusBar (как ни странно, хотя я использую expo, у меня было еще больше проблем со стилем expo-status-bar )
У меня заканчиваются идеи, которые стоит попробовать.. Ничто из вышеперечисленного ничего не дало при реализации. Как только я скрываю строку состояния, вверху всегда остается пустое пространство, и это меня очень раздражает.
Код:
Я почти уверен, что это мой первый вопрос, который я публикую здесь, поэтому надеюсь, что сделаю это правильно и предоставлю всю необходимую информацию. Контекст: h3> Это двойной личный проект. Я создаю это приложение исключительно для себя и своего партнера, поэтому никаких серьезных ограничений нет, и я открыт для всех предложений и рекомендаций. Мы с ней часто путешествуем и говорим на нескольких иностранных языках, но мы оба по-прежнему учимся больше каждый день и хотим иметь персонализированное приложение, которым мы могли бы пользоваться и делиться вместе, поэтому я начал создавать это приложение для наших навыков общения и развития языковых навыков.< /p> Этот проект также предоставляет мне прекрасную возможность изучить и развить свои навыки работы с React Native и нативной разработкой на Kotlin/Swift (некоторое время я пробовал JavaFx, но у меня полный опыт разработки). -time интерфейсный веб-разработчик, поэтому React Native кажется гораздо более естественным подходом для разработки пользовательского интерфейса, а Kotlin/Swift — для нативной и серверной части). По сути, это просто учебное приложение, сочетающее в себе функции Мне нравятся Quizlet, Anki, Pimsleur и т. д., а также объединение некоторых функций чата, среди прочего, но это выходит за рамки данной проблемы. Пожалуйста, ознакомьтесь с моей формулировкой основной проблемы. Постановка проблемы: У меня все еще возникает проблема с панелью состояния в верхней части экрана. оставляя пустое пространство после его скрытия. Эта проблема сохраняется, несмотря на все, что я уже пробовал и исследовал. Цель: Я хочу, чтобы на этом дисплее отображался тот цвет фона, который мне нужен. когда StatusBar скрыт, или ImageBackground в зависимости от того, на каком действии/экране он находится. т. е. в верхней части экрана нет пустого пространства или выреза. Что я уже пробовал: [list] [*]Я я уже попробовал фоновый цвет как прозрачный и установил для свойства translucent значение true. [*]В app.json я пытался настроить его на использование темного цвета для свойства userInterfaceStyle. [*]Я пробовал использовать пакет response-native-safe-area-context с их SafeAreaProvider для всего приложения и использовал SafeAreaView вокруг самого компонента (я знаю, что обычный SafeAreaView предназначен только для iOS, а мне он нужен специально для Android, я просто подумал, возможно, стоит попробовать этот контекстный пакет). [*]Установите для фона черный цвет [*]Установите стиль на темный, а для barStyle – на темный контент < li>Я пробовал использовать expo-status-bar и response-native StatusBar (как ни странно, хотя я использую expo, у меня было еще больше проблем со стилем expo-status-bar ) [/list] У меня заканчиваются идеи, которые стоит попробовать.. Ничто из вышеперечисленного ничего не дало при реализации. Как только я скрываю строку состояния, вверху всегда остается пустое пространство, и это меня очень раздражает. Код: [h4]app.json< /h4> [code]{ "expo": { "name": "...", "slug": "...", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "dark", "splash": { "image": "./assets/....gif", "resizeMode": "contain", "backgroundColor": "#000000" }, "assetBundlePatterns": [ "**/*" ], "ios": { "supportsTablet": true, "bundleIdentifier": "com...." }, "android": { "package": "com....", "adaptiveIcon": { "foregroundImage": "./assets/....gif", "backgroundColor": "#000000" } }, "androidStatusBar": { "barStyle": "dark-content", "backgroundColor": "#000000", "hidden": true, "translucent": true }, "web": { "favicon": "./assets/favicon.png" } } } [/code] Flashcards.js[/h4] [code]import { useState, useEffect } from 'react'; import { View, Text, Pressable, StyleSheet, FlatList, Dimensions, ImageBackground, StatusBar } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import Logo from '../assets/....gif';
const SAMPLE = [ { id: 0, name: "Русские карточки", description: "These are sample Russian flashcards.", }, { id: 1, name: "Flashcards tiếng Việt", description: "These are sample Vietnamese flashcards.", }, { id: 2, name: '中文抽認卡', description: 'These are sample Chinese flashcards.', }, { id: 3, name: 'כרטיסי פלאש בעברית', description: 'These are sample Hebrew flashcards.', }, { id: 4, name: 'Data structures', description: 'These are sample data structure flashcards.', }, { id: 5, name: 'Countries', description: 'These are sample culture flashcards from countries around the world.', }, { id: 6, name: 'Cultures', description: 'These are sample cultural tradition flashcards.', }, { id: 7, name: 'Exercises', description: 'These are sample flashcards about healthy exercises.', }, { id: 8, name: 'Final', description: 'This is the final collection just being used to see if it will make it scrollable.', } ];
const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', marginTop: StatusBar.currentHeight + 10 || 10, backgroundColor: '#000000', alignItems: 'center', justifyContent: 'center', paddingBottom: 60, }, image: { flex: 1, justifyContent: 'center', contentFit: 'cover', }, titleContainer: { borderBottomWidth: 6, borderColor: 'red', borderRadius: 12, backgroundColor: 'black', justifyContent: 'center', alignItems: 'center', marginLeft: 12, marginRight: 12, marginTop: 14, marginBottom: 10, }, title: { color: 'white', fontFamily: 'Agright', fontSize: 32, }, collectionsContainer: { borderWidth: 6, borderColor: 'red', borderRadius: 12, backgroundColor: 'black', width: DEVICE_WIDTH - 10, }, flatlist: { flexGrow: 0, height: '100%', }, item: { borderRadius: 12, borderWidth: 2, borderColor: 'red', width: '99%', alignItems: 'center', marginLeft: 2, marginRight: 2, marginTop: 6, marginBottom: 6, paddingVertical: 6, backgroundColor: '#000000', }, itemTitle: { fontFamily: 'Agright', fontSize: 26, color: 'white', }, itemDescription: { fontFamily: 'Agright', fontSize: 13, color: 'white', } }); [/code] [h4]App.js[/h4] [code]import { useState, useEffect, useContext } from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import * as SplashScreen from 'expo-splash-screen'; import * as Font from 'expo-font'; import { Platform, NativeModules } from 'react-native'; import { IntlProvider } from 'react-intl'; import en from './locales/en.json'; import he from './locales/he.json'; import ru from './locales/ru.json'; import uk from './locales/uk.json'; import vi from './locales/vi.json'; import zh from './locales/zh.json';
/** * Components */ import Login from './screens/Login'; import Home from './screens/Home'; import Flashcards from './screens/Flashcards'; import StudyMode from './screens/StudyMode'; import Texts from './screens/Texts'; import Translator from './screens/Translator'; import Dictionary from './screens/Dictionary'; import Chat from './screens/Chat';
/** * Hooks */ import useFonts from './hooks/useFonts';
/** * Context */ import { LocaleContextProvider, LocaleContext } from './context/LocaleContext'; import { DbContextProvider } from './database/DbContext';
Мобильная версия