如何将静态NavigationOptions与功能组件一起使用？

问题描述 投票：0回答：2

我如何使用这样的东西：

    /* Imports */
    import React from 'react';
    import { TouchableOpacity, StatusBar, View, Text, Linking } from 'react-native';
    import { Container, Header, Left, Body, Title, Button, List, ListItem, Content } from 'native-base';
    import { AntDesign, MaterialCommunityIcons, Entypo, MaterialIcons, FontAwesome } from '@app/utils/Icons';
    import { custom, responsive } from '@app/styles/config';
    import { withTheme} from '../../theme/themeProvider';
    import { styles } from '../../theme/theme';
    /* /Imports/ */

    class SettingsView extends React.Component {
      /* Navigation Options Like (Header, Title, Menu, Icon, Style) */
      static navigationOptions = ({ navigation }) => ({
        title: "Настройки",
        drawerIcon: ({ tintColor }) => (
          <MaterialCommunityIcons name="settings" style={custom.drawerMenuIcon}/>
        )
      });
      /* /Navigation Options Like (Header, Title, Menu, Icon, Style)/ */

目前，当我导出带有Theme方法的默认SettingsView时，静态navigatioOptions不会显示它们无效。是bug还是类似的东西，您可以帮我吗？如果您能帮助我，我将非常感激！

    /* Render Method - Is Place Where You Can View All Content Of The Page */
      render() {
        return (
          <Container>
            <Header style={custom.header}>
              <StatusBar backgroundColor="#425768" barStyle="default"/>
              <Left>
                <TouchableOpacity hitSlop={{ top: 20, bottom: 20, left: 50, right: 50 }} onPress={() => this.props.navigation.navigate('Home')}>
                  <Button transparent onPress={() => this.props.navigation.navigate('Home')}>
                    <AntDesign name="arrowleft" style={custom.headerBackIcon} onPress={() => this.props.navigation.navigate('Home')}/>
                  </Button>
                </TouchableOpacity>
              </Left>
              <Body style={custom.headerSettingsBody}>
                <Title style={responsive.headerTitle}>
                    Настройки
                </Title>
              </Body>
            </Header>
            <Content style={styles(this.props).backgroundColorTheme}>
              <List style={styles(this.props).backgroundColorTheme}>
                <ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('AppIntro')}>
                  <MaterialIcons name="import-contacts" size={25} color={'#22364F'}/>
                  <Text style={custom.settingsText}>
                      Покажете въвеждащата страница
                  </Text>
                  <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
                </ListItem>
                <ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('ChangeTheme')}>
                  <MaterialIcons name="color-lens" size={25} color={'#22364F'}/>
                  <Text style={custom.settingsText}>
                      Промяна на темата
                  </Text>
                  <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
                </ListItem>
                <View>
                  <Text style={custom.settingsMenuHeader}>
                      Данни
                  </Text>
                </View>
                <ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('ImportData')}>
                  <MaterialCommunityIcons name="file-import" size={25} color={'#22364F'}/>
                  <Text style={custom.settingsText}>
                      Импортиране на данни
                  </Text>
                  <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
                </ListItem>
                <ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('ExportData')}>
                  <MaterialCommunityIcons name="file-export" size={25} color={'#22364F'}/>
                  <Text style={custom.settingsText}>
                      Експортиране на данни
                  </Text>
                  <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
                </ListItem>
                <View>
                  <Text style={custom.settingsMenuHeader}>
                    Относно
                  </Text>
                </View>
                <ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('AboutUs')}>
                  <FontAwesome name="users" size={25} color={'#22364F'}/>
                  <Text style={custom.settingsText}>
                      За нас
                  </Text>
                  <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
                </ListItem>
                <ListItem style={custom.settingsListItem} onPress={() => Linking.openURL('mailto:[email protected]')}>
                  <MaterialCommunityIcons name="contact-mail" size={25} color={'#22364F'}/>
                  <Text style={custom.settingsText}>
                      Контакти
                  </Text>
                  <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
                </ListItem>
                <ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('AppVersion')}>
                  <MaterialIcons name="info" size={25} color={'#22364F'}/>
                  <Text style={custom.settingsText}>
                      Версия на приложението
                  </Text>
                  <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
                </ListItem>
              </List>
            </Content>
          </Container>
        );
      }
      /* /Render Method - Is Place Where You Can View All Content Of The Page/ */
    }

    export default withTheme(SettingsView);

    /* Render Method - Is Place Where You Can View All Content Of The Page */
      render() {
        return (
          <Container>
            <Header style={custom.header}>
              <StatusBar backgroundColor="#425768" barStyle="default"/>
              <Left>
                <TouchableOpacity hitSlop={{ top: 20, bottom: 20, left: 50, right: 50 }} onPress={() => this.props.navigation.navigate('Home')}>
                  <Button transparent onPress={() => this.props.navigation.navigate('Home')}>
                    <AntDesign name="arrowleft" style={custom.headerBackIcon} onPress={() => this.props.navigation.navigate('Home')}/>
                  </Button>
                </TouchableOpacity>
              </Left>
              <Body style={custom.headerSettingsBody}>
                <Title style={responsive.headerTitle}>
                    Настройки
                </Title>
              </Body>
            </Header>
            <Content style={styles(this.props).backgroundColorTheme}>
              <List style={styles(this.props).backgroundColorTheme}>
                <ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('AppIntro')}>
                  <MaterialIcons name="import-contacts" size={25} color={'#22364F'}/>
                  <Text style={custom.settingsText}>
                      Покажете въвеждащата страница
                  </Text>
                  <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
                </ListItem>
                <ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('ChangeTheme')}>
                  <MaterialIcons name="color-lens" size={25} color={'#22364F'}/>
                  <Text style={custom.settingsText}>
                      Промяна на темата
                  </Text>
                  <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
                </ListItem>
                <View>
                  <Text style={custom.settingsMenuHeader}>
                      Данни
                  </Text>
                </View>
                <ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('ImportData')}>
                  <MaterialCommunityIcons name="file-import" size={25} color={'#22364F'}/>
                  <Text style={custom.settingsText}>
                      Импортиране на данни
                  </Text>
                  <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
                </ListItem>
                <ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('ExportData')}>
                  <MaterialCommunityIcons name="file-export" size={25} color={'#22364F'}/>
                  <Text style={custom.settingsText}>
                      Експортиране на данни
                  </Text>
                  <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
                </ListItem>
                <View>
                  <Text style={custom.settingsMenuHeader}>
                    Относно
                  </Text>
                </View>
                <ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('AboutUs')}>
                  <FontAwesome name="users" size={25} color={'#22364F'}/>
                  <Text style={custom.settingsText}>
                      За нас
                  </Text>
                  <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
                </ListItem>
                <ListItem style={custom.settingsListItem} onPress={() => Linking.openURL('mailto:[email protected]')}>
                  <MaterialCommunityIcons name="contact-mail" size={25} color={'#22364F'}/>
                  <Text style={custom.settingsText}>
                      Контакти
                  </Text>
                  <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
                </ListItem>
                <ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('AppVersion')}>
                  <MaterialIcons name="info" size={25} color={'#22364F'}/>
                  <Text style={custom.settingsText}>
                      Версия на приложението
                  </Text>
                  <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
                </ListItem>
              </List>
            </Content>
          </Container>
        );
      }
      /* /Render Method - Is Place Where You Can View All Content Of The Page/ */
    }

    export default withTheme(SettingsView);
react-native themes react-navigation
2个回答
0
投票

static关键字在类上创建一个属性。

考虑：

class Foo {
  static bar = 42;
}

与以下相同：

class Foo {}

Foo.bar = 42;

因此，当您需要添加静态属性时，请将其分配为属性。例如，对于功能组件：

function MyComponent() {}

MyComponent.navigationOptions = {};

或者您的情况：

const SettingsViewComponent = withTheme(SettingsView);

SettingsViewComponent.navigationOptions = {};

将这个功能添加到withTheme HOC以便复制属性将是更好的解决方案：

function withTheme(SourceComponent) {
  function TargetComponent() {}

  TargetComponent.navigationOptions = SourceComponent.navigationOptions;

  return TargetComponent;
}

您还可以使用此库来复制所有静态属性：https://github.com/mridgway/hoist-non-react-statics

-1
投票

Static关键字为类创建一个静态函数，这意味着该函数不依赖于该类的任何实例。

因此，只有classes可以具有static方法。因此，您不能在功能组件内使用static navigationOptions。

从MDN docs：

静态方法未在类的实例上调用。代替，他们被称为类本身。这些通常是实用程序功能，例如用于创建或克隆对象的函数。

静态方法调用直接在类上进行，而不是可在该类的实例上调用。静态方法通常用于创建实用程序功能。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.