Реагируйте Native использовать this.props в статической навигации

Question

Это мой компонент для темы:

/* Imports */
import React from 'react';
import { View, Text, FlatList, TouchableOpacity } from 'react-native';
import { withTheme} from '@app/theme/themeProvider';
import { AntDesign } from '@app/utils/Icons';
import { custom } from '@app/styles/config';
import { styles } from '@app/theme/theme';
/* /Imports/ */

class ChangeTheme extends React.Component {
    /* Navigation Options Like (Header, Title, Menu, Icon, Style) */
    static navigationOptions = ({navigation}) => ({
        title: "Промяна на темата",
        headerStyle: { backgroundColor: styles(this.props).backgroundColor},
        headerTitleStyle: { color: '#F5F5F5' },
        headerLeft: <AntDesign name="arrowleft" size={24} color="#F5F5F5" onPress={() => {navigation.navigate('Settings')}} style={custom.headerLeft} />
    });
    /* /Navigation Options Like (Header, Title, Menu, Icon, Style)/ */

    /* Render Method - Is Place Where You Can View All Content Of The Page */
    render() {
        const { themes } = this.props;
        const theme = styles(this.props);

        return (
            <FlatList style={[custom.settingsThemeContainer, theme.backgroundColorTheme]} data={themes} renderItem={this._renderItem.bind(this)} ListHeaderComponent={this._ListHeaderComponent.bind(this)}/>
        );
    }
    /* /Render Method - Is Place Where You Can View All Content Of The Page/ */
}

export default withTheme(ChangeTheme);

Как я могу установить headerStyle так: headerStyle: {backgroundColor: styles (this.props) .backgroundColor}

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

Answer 1

Вы можете исправить с помощью функции navigation.setParams

/* Imports */
import React from 'react';
import {View, Text, FlatList, TouchableOpacity} from 'react-native';
import {withTheme} from '@app/theme/themeProvider';
import {AntDesign} from '@app/utils/Icons';
import {custom} from '@app/styles/config';
import {styles} from '@app/theme/theme';
/* /Imports/ */

class ChangeTheme extends React.Component {
  /* Navigation Options Like (Header, Title, Menu, Icon, Style) */
  static navigationOptions = ({navigation}) => {
    return {
      title: 'Промяна на темата',
      headerStyle: {
        backgroundColor:
          navigation.state.params && navigation.state.params.backgroundColor
            ? navigation.state.params.backgroundColor
            : '#FFF',
      },
      headerTitleStyle: {color: '#F5F5F5'},
      headerLeft: (
        <AntDesign
          name="arrowleft"
          size={24}
          color="#F5F5F5"
          onPress={() => {
            navigation.navigate('Settings');
          }}
          style={custom.headerLeft}
        />
      ),
    };
  };
  /* /Navigation Options Like (Header, Title, Menu, Icon, Style)/ */

  componentDidMount() {
    const {navigation} = this.props;
    const {backgroundColor} = styles(this.props);
    navigation.setParams({backgroundColor});
  }

  componentDidUpdate(prevProps) {
    const {navigation} = this.props;
    const {backgroundColor} = styles(this.props);
    if(prevProps.navigation.state && prevProps.navigation.state.params && prevProps.navigation.state.params.backgroundColor !== backgroundColor){
      navigation.setParams({backgroundColor});
    }
  }

  /* Render Method - Is Place Where You Can View All Content Of The Page */
  render() {
    const {themes} = this.props;
    const theme = styles(this.props);

    return (
      <FlatList
        style={[custom.settingsThemeContainer, theme.backgroundColorTheme]}
        data={themes}
        renderItem={this._renderItem.bind(this)}
        ListHeaderComponent={this._ListHeaderComponent.bind(this)}
      />
    );
  }
  /* /Render Method - Is Place Where You Can View All Content Of The Page/ */
}

export default withTheme(ChangeTheme);