javascript - React Native 在静态 navigationOptions 中使用 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}

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

标签： javascriptreactjsreact-nativereact-navigationreact-props

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