gpt4 book ai didi

react-native - 如何将静态导航选项与功能组件一起使用?

转载 作者:行者123 更新时间:2023-12-05 09:12:20 32 4
gpt4 key购买 nike

我如何使用这样的东西:

    /* 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 withTheme 方法时,静态 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);

最佳答案

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

关于react-native - 如何将静态导航选项与功能组件一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58468214/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com