Joh*_*ith 2 themes react-native react-navigation
我如何使用这样的东西：
/* 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 = {};
将此功能添加到您的withThemeHOC 以便它复制属性将是一个更好的解决方案：
function withTheme(SourceComponent) {
function TargetComponent() {}
TargetComponent.navigationOptions = SourceComponent.navigationOptions;
return TargetComponent;
}
您还可以使用此库复制所有静态属性：https : //github.com/mridgway/hoist-non-react-statics
| 归档时间： |
|
| 查看次数： |
5773 次 |
| 最近记录： |