Javascript 在静态导航选项中使用this.props

这是我的主题组件：

/* 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);

/*导入*/
从“React”导入React；
从“react native”导入{视图、文本、平面列表、TouchableOpacity}；
从'@app/theme/themeProvider'导入{withTheme}；
从'@app/utils/Icons'导入{AntDesign}；
从'@app/styles/config'导入{custom}；
从'@app/theme/theme'导入{style}；
/*/进口/*/
类ChangeTheme扩展了React.Component{
/*导航选项，如（标题、标题、菜单、图标、样式）*/
静态导航选项=（{navigation}）=>({
标题：“Паааааааааааааа，
headerStyle:{backgroundColor:styles（this.props.backgroundColor}，
标题样式：{color:'#f5'}，
headerLeft:{navigation.navigate（'Settings'）}}style={custom.headerLeft}/>
});
/*/导航选项，如（标题、标题、菜单、图标、样式）/*/
/*Render Method-是可以查看页面所有内容的地方*/
render（）{
const{themes}=this.props；
const主题=样式（this.props）；
返回(
);
}
/*/Render Method-是可以查看页面所有内容的位置/*/
}
导出带有主题的默认值（ChangeTheme）；

如何设置headerStyle:headerStyle:{backgroundColor:styles（this.props.backgroundColor}

---

因为当我现在刷新我的应用程序时，我得到以下错误：道具未定义

您可以使用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);

/*导入*/
从“React”导入React；
从“react native”导入{视图、文本、平面列表、TouchableOpacity}；
从'@app/theme/themeProvider'导入{withTheme}；
从'@app/utils/Icons'导入{AntDesign}；
从'@app/styles/config'导入{custom}；
从'@app/theme/theme'导入{style}；
/*/进口/*/
类ChangeTheme扩展了React.Component{
/*导航选项，如（标题、标题、菜单、图标、样式）*/
静态导航选项=（{navigation}）=>{
返回{
标题：'，
头型：{
背景颜色：
navigation.state.params&&navigation.state.params.backgroundColor
？navigation.state.params.backgroundColor
：“#FFF”，
},
标题样式：{color:'#f5'}，
左校长：(
{
导航。导航（“设置”）；
}}
style={custom.headerLeft}
/>
),
};
};
/*/导航选项，如（标题、标题、菜单、图标、样式）/*/
componentDidMount（）{
const{navigation}=this.props；
const{backgroundColor}=styles（this.props）；
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）{
setParams（{backgroundColor}）；
}
}
/*Render Method-是可以查看页面所有内容的地方*/
render（）{
const{themes}=this.props；
const主题=样式（this.props）；
返回(
);
}
/*/Render Method-是可以查看页面所有内容的位置/*/
}
导出带有主题的默认值（ChangeTheme）；

style（）方法的作用是什么？

this.props.backgroundColor

不应该全部放在括号内吗？我发现以下错误prevProps.navigation.state.params未定义。我如何修复它？我已更新了答案please componentDidUpdate Method有我现在得到的内容和位置：。这就是我的主题提供者：让我知道一件事。应用程序中是否有更改应用程序主题的功能，或者主题数据是静态的。