Как использовать статические навигационные опции с функциональным компонентом? - PullRequest
Новая
       5

Как использовать статические навигационные опции с функциональным компонентом?

0 голосов
/ 20 октября 2019

Как я могу использовать что-то вроде этого: 

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

На данный момент, когда я экспортирую стандартное представление SettingsView с методом Theme static navigatioOptions не показывает, что они не работают. Это ошибка или что-то подобное, вы можете мне помочь? Я буду очень благодарен, если ты поможешь мне! 

    /* 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:takeandreturn@gmail.com')}>
                  <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:takeandreturn@gmail.com')}>
                  <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);

1 Ответ

1 голос
/ 20 октября 2019

Ключевое слово 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...