Как реализовать пользовательскую тему/стиль в ответном нативном?

Question

Если пользователь выбрал светлую тему и переключится на темную тему, тогда все сцены сразу же будут отображаться с использованием темной темы.

Я использую реакцию-родной-роутер-поток, если это помогает.

Спасибо заранее,

Answer 1

можно начать с создания одного файла JS, содержащий два объекта, которые имеют цвета для каждой темы. Затем просто используйте один по умолчанию, и если пользователь выбирает другую тему, сохраните ее в базе данных или используя локальное хранилище и вытащите соответствующий объект.

export const theme1 = { 
    blue: '#fddd', 
    red: '#ddddd', 
    buttonColor: '#fff' 
} 

export const theme2 = { 
    blue: '#fddd', 
    red: '#ddddd' 
    buttonColor: '#fff' 
} 

Тогда просто импортировать соответствующий файл:

import * as themes from 'Themes' 
const currentTheme = this.props.currentTheme ? this.props.currentTheme : 'theme1' 

const styles = StyleSheet.create({ 
    button: { 
    color: themes[currentTheme].buttonColor 
    }, 

}) 

Answer 2

Различные подходы возможны. Один из них - использовать React context. Как правило, его следует использовать с осторожностью, но тематика - один из официальных примеров, где он подходит.

Тематизация является хорошим примером того, когда вы могли бы хотеть все поддерево, чтобы иметь доступ к некоторой части информации

Так пример может выглядеть

class App extends Component { 
    getChildContext() { 
    return {theme: { primaryColor: "purple" }}; 
    } 
    ... 
} 
App.childContextTypes = { 
    theme: React.PropTypes.object 
}; 

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

class Button extends Component { 
    render() { 
    return <TouchableHighlight underlayColor={this.context.theme.primaryColor}>... 
    } 
} 
Button.contextTypes = { 
    theme: React.PropTypes.object 
}; 

Если вы хотите переключать тему, вы можете установить контекст на основе вашего состояния/реквизита, который может быть основан на выборе пользователя.

В настоящее время мы имеем дело с одинаковыми вопросами, и поэтому у нас есть начальная библиотека прототипов, которая называется react-native-themeable.

Идея заключается в использовании контекста для хранения темы и (повторного) реализации компонентов RN, чтобы они могли заменять исходные компоненты, но поддерживали их.

Пример темы переключения вы можете найти в https://github.com/instea/react-native-themeable/blob/master/examples/src/SwitchTheme.js