Есть ли способ добиться настоящего темного режима в React Native для iOS?

При переключении темного режима в iOS мы можем видеть, что предварительные просмотры приложений в переключателе приложений немедленно меняют свой внешний вид, даже если они приостановлены в фоновом режиме.

Этот пост нацелен на то, чтобы выяснить, возможно ли добиться этого в React Native (независимо от использования чистого React Native или Expo), и если нет, можем ли мы как-то помочь сделать это возможным?

Просмотрите анимацию:
animation
Или нажмите здесь, если не отображается.

  1. Родное приложение «Настройки», даже если оно приостановлено в фоновом режиме, меняет свой внешний вид при переключении темного режима.
  2. Клиентское приложение Expo, также приостановленное в фоновом режиме (переключатель приложений был открыт из дома, а не во время использования Expo), не меняет свой внешний вид при переключении темного режима. Это произойдет только тогда, когда я нажму, чтобы вернуться в приложение.
  3. Я не уверен, что клиент Expo создан с помощью React Native, потому что поведение, описанное в «2. не всегда бывает. Но я попытался создать свое собственное приложение RN с react-native-appearance, и цвета не меняется при приостановке (как показано в анимации)


На данный момент существует хакерский способ частичного достижения этого, но я не думаю, что кто-то сможет отправить свое приложение с ним.

<View style={{
    backgroundColor: isDarkModeOn ? 'black' : 'white', // remove this
}} />

Не указывайте backgroundColor вообще, и оно будет вести себя как собственное приложение, даже если оно приостановлено и просматривается из переключателя приложений, вероятно, потому, что по умолчанию оно использует собственное значение… но:

  • это относится только к backgroundColor
  • и только если это <View/> (или что-то подобное)
  • и ограничен черно-белым

Нам по-прежнему нужно полагаться на JavaScript, пока не выполняется одно из вышеперечисленных условий.


Хотелось бы верить, что есть решение, о котором я не знаю. Но до сих пор ни в одном из руководств по темному режиму я не упоминал об этом.


react-native react-native-ios ios-darkmode
person chin98edwin    schedule 13.03.2020    source источник
comment
Ваша ссылка на анимацию ведет на приватную гифку! Мы не можем это смотреть!   -  person Fotis Tsakiris    schedule 13.03.2020
comment
@FotisTsakiris Ссылка просто дополнительная на случай, если встроенная не отображается, кстати, я сделал ее общедоступной.   -  person chin98edwin    schedule 13.03.2020
comment
СУПЕР! Хотел бы я помочь. Почему бы вам не отправить электронное письмо Уильяму Кандилону [email protected]. Он также известен своим сериалом на YouTube «Можно ли это сделать в React Native». Я уверен, что он может помочь!   -  person Fotis Tsakiris    schedule 13.03.2020

Ответы (1)


arrow_upward
0
arrow_downward

Это определенно можно сделать с помощью такого кода:

import { DynamicColorIOS } from 'react-native';
export const C = {
  normalText:   DynamicColorIOS({ dark: '#999', light: '#222'}),
  normalTextBold: DynamicColorIOS({ dark: '#ccc', light: '#000'}),
  titleText:    DynamicColorIOS({ dark: '#777', light: '#999'}),
  headingText:  DynamicColorIOS({ dark: '#999', light: '#666'}),
  borderLine:   DynamicColorIOS({ dark: '#888', light: '#888'}),
  background:   DynamicColorIOS({ dark: '#000', light: '#fff'}),
  internalLink: DynamicColorIOS({ dark: '#1EAEDB', light: '#01a'}),
};

Я понятия не имею, как это повлияет на совместимость с Android, но если вы измените все свои таблицы стилей, чтобы использовать эти парные цвета (C.background справа от свойства стиля), вы получите правильный цвет в светлом и темном режимах. изменение и анимация системой, как вы описываете. Вы даже можете проверить это в симуляторе iOS с помощью Cmd+Shift+A, чтобы изменить внешний вид, который будет анимироваться из светлого в темный режим и обратно, если вы нажмете его второй раз.

person Jared Updike    schedule 20.05.2021