Android 自定义抽屉驱动程序-ReactNative
我有我的配菜菜单。我知道要定制抽屉，需要“contentComponents”道具 例如，我想要一个打开模式的按钮，如：Share（在其他社交媒体上共享应用程序） 但现在，我所有的按钮都是路线。因此，如果我点击它，它将重定向到页面（正常）。我只想添加一个按钮，它可以做出反应，而不是重定向 我不知道如何在组件中动态定制它。我考虑对每个按钮进行硬编码（一些用于重定向，一些用于显示简单模式） 这是我的密码： index.android.jsAndroid 自定义抽屉驱动程序-ReactNative,android,ios,react-native,navigation-drawer,react-navigation,Android,Ios,React Native,Navigation Drawer,React Navigation,我有我的配菜菜单。我知道要定制抽屉，需要“contentComponents”道具 例如，我想要一个打开模式的按钮，如：Share（在其他社交媒体上共享应用程序） 但现在，我所有的按钮都是路线。因此，如果我点击它，它将重定向到页面（正常）。我只想添加一个按钮，它可以做出反应，而不是重定向 我不知道如何在组件中动态定制它。我考虑对每个按钮进行硬编码（一些用于重定向，一些用于显示简单模式） 这是我的密码： index.android.js const DrawerContent = (props)
const DrawerContent = (props) => (
<ScrollView>
<View style={styles.container}>
<Text style={styles.logo}>TechDico</Text>
<Text style={{ paddingLeft: 10, paddingRight: 10, fontSize: 13, textAlign: 'center', color: '#f4f4f4' }}>Des millions de traductions classées par domaine d'activité</Text>
</View>
<DrawerItems style={{ marginTop: 30 }} {...props} />
</ScrollView>
)
const appNavigator = DrawerNavigator({
Redirection1: {
screen: Index,
navigationOptions: {
drawerLabel: 'Redirection1',
drawerIcon: ({ tintColor }) => (<Icon name="home" size={20} color={tintColor} />),
}
},
DisplayModal: {
screen: Index,
navigationOptions: {
drawerLabel: 'DisplayModal',
drawerIcon: ({ tintColor }) => (<Icon name="home" size={20} color={tintColor} />),
}
},
Redirection2: {
screen: Index,
navigationOptions: {
drawerLabel: 'Redirection2',
drawerIcon: ({ tintColor }) => (<Icon name="home" size={20} color={tintColor} />),
}
}, }, {
// define customComponent here
contentComponent: DrawerContent,
contentOptions: {
inactiveTintColor: '#000000',
activeTintColor: '#1eacff',
showIcon: true,
}
});
export default class Index extends Component {
renderRoot = () => {
const { navigation } = this.props;
console.log("My Navigation ", navigation);
switch (navigation.state.key) {
case 'Redirection1':
return (
<App navigation={navigation} />
);
case 'DisplayModal':
// TODO I don't want to return so I can remove to cancel the redirection, but now, how can I display a modal without redirect.
return (
<DisplayModal navigation={navigation} />
);
case 'Redirection2':
return (
<Redirection2 navigation={navigation} />
);
default:
return (
<Test navigation={navigation} />
);
}
}
const-DrawerContent=（道具）=>(
泰克迪科
百万交易级
)
常量appNavigator=DrawerNavigator({
重定向1：{
屏幕：索引，
导航选项：{
抽屉标签：“重定向1”，
抽屉图标：（{tintColor}）=>（），
}
},
显示模式：{
屏幕：索引，
导航选项：{
抽屉标签：“DisplayModal”，
抽屉图标：（{tintColor}）=>（），
}
},
重定向2：{
屏幕：索引，
导航选项：{
抽屉标签：“重定向2”，
抽屉图标：（{tintColor}）=>（），
}
}, }, {
//在这里定义自定义组件
contentComponent:DrawerContent，
内容选项：{
InactiveIntColor:“#000000”，
activeTintColor:“#1eacff”，
showIcon：没错，
}
});
const DrawerContent = (props) => (
<ScrollView>
<View style={styles.container}>
<Text style={styles.logo}>TechDico</Text>
<Text style={{ paddingLeft: 10, paddingRight: 10, fontSize: 13, textAlign: 'center', color: '#f4f4f4' }}>Des millions de traductions classées par domaine d'activité</Text>
</View>
<DrawerItems style={{ marginTop: 30 }} {...props} />
</ScrollView>
)
const appNavigator = DrawerNavigator({
Redirection1: {
screen: Index,
navigationOptions: {
drawerLabel: 'Redirection1',
drawerIcon: ({ tintColor }) => (<Icon name="home" size={20} color={tintColor} />),
}
},
DisplayModal: {
screen: Index,
navigationOptions: {
drawerLabel: 'DisplayModal',
drawerIcon: ({ tintColor }) => (<Icon name="home" size={20} color={tintColor} />),
}
},
Redirection2: {
screen: Index,
navigationOptions: {
drawerLabel: 'Redirection2',
drawerIcon: ({ tintColor }) => (<Icon name="home" size={20} color={tintColor} />),
}
}, }, {
// define customComponent here
contentComponent: DrawerContent,
contentOptions: {
inactiveTintColor: '#000000',
activeTintColor: '#1eacff',
showIcon: true,
}
});
export default class Index extends Component {
renderRoot = () => {
const { navigation } = this.props;
console.log("My Navigation ", navigation);
switch (navigation.state.key) {
case 'Redirection1':
return (
<App navigation={navigation} />
);
case 'DisplayModal':
// TODO I don't want to return so I can remove to cancel the redirection, but now, how can I display a modal without redirect.
return (
<DisplayModal navigation={navigation} />
);
case 'Redirection2':
return (
<Redirection2 navigation={navigation} />
);
default:
return (
<Test navigation={navigation} />
);
}
}
导出默认类索引扩展组件{
renderRoot=（）=>{
const{navigation}=this.props；
日志（“我的导航”，导航）；
开关（导航.状态.键）{
案例“重定向1”：
返回(
);
案例“DisplayModal”：
//TODO我不想返回，因此我可以删除以取消重定向，但现在，我如何在没有重定向的情况下显示模式。
返回(
);
案例“重定向2”：
返回(
);
违约：
返回(
);
}
}
我正在使用“react navigation”。我也在看同一个任务。我认为有多个路由指向同一屏幕类型可能最终会导致状态管理混乱，因为每个屏幕实例都不同 查看
DrawerSidebarDrawerNavigatorItemsDrawerNavigatorItems组件中安装执行所需操作，然后导航到默认路由
下面是一个示例代码：
let drawer = DrawerNavigator({
Main: {
screen: MainScreen,
},
About: {
screen: AboutScreen,
},
ContactUs: {
screen: ContactUsFakeScreen,
},
});
const mailUrl = "mailto:test@test.com";
class ContactUsFakeScreen extends React.Component {
componentWillMount() {
let self = this;
Linking.canOpenURL(mailUrl)
.then(self.openEmail)
.catch(err => self.openEmail(false));
}
openEmail(supported) {
if (supported) {
Linking.openURL(mailUrl).catch(err => {});
}
let { navigation } = this.props;
navigation.navigate('Main');
}
render() {
return null;
}
}
这里的Main
/Main screen
和About
About
是常规的路由和屏幕，而ContactUs
/ContactUsFakeScreen
只是假装是路由和屏幕。点击ContactUs
将触发组件将挂载
，该组件将处理电子邮件屏幕和en最终导航到Main屏幕
（Main
路线）
另一种方法可能是从抽屉路由器劫持getStateForAction
，并在那里放置一些额外的路由逻辑，动态地替换目标路由
const defaultDrawerGetStateForAction = drawer.router.getStateForAction;
drawer.router.getStateForAction = (action, state) => {
let newState = defaultDrawerGetStateForAction(action, state);
if (action.type === 'Navigation/NAVIGATE' && action.routeName === 'ContactUs') {
// extra logic here ...
newState.routes.forEach(r => {
if (r.key === 'DrawerClose') {
// switching route from ContactUs to Main.
r.index = 0;
}
});
}
return newState;
}
如果抽屉列表中的某个项目甚至不可操作（如版权），那么假屏幕将看起来更简单（注意通过导航选项设置样式）
：
let drawer=DrawerNavigator({
...
版权所有：{
屏幕：版权所有，
},
});
类版权扩展了React.Component{
静态导航选项={
抽屉标签：（{tintColor，focused}）=>
（版权所有2017）
)
};
组件willmount（）{
让{navigation}=this.props；
导航。导航（'Main'）；
}
render（）{
返回null；
}
}
我也在看同一个任务。我认为多个路由指向同一屏幕类型可能最终会导致状态管理混乱，因为每个屏幕实例都不同
查看DrawerSidebar
/DrawerNavigatorItems
中的源代码，侧栏列表中的所有项目似乎都是在抽屉的路由配置中找到的项目（除非我们完全重写DrawerNavigatorItems
）因此，我们可能会为某些路由设置一个假屏幕，并在组件中安装执行所需操作，然后导航到默认路由
下面是一个示例代码：
let drawer = DrawerNavigator({
Main: {
screen: MainScreen,
},
About: {
screen: AboutScreen,
},
ContactUs: {
screen: ContactUsFakeScreen,
},
});
const mailUrl = "mailto:test@test.com";
class ContactUsFakeScreen extends React.Component {
componentWillMount() {
let self = this;
Linking.canOpenURL(mailUrl)
.then(self.openEmail)
.catch(err => self.openEmail(false));
}
openEmail(supported) {
if (supported) {
Linking.openURL(mailUrl).catch(err => {});
}
let { navigation } = this.props;
navigation.navigate('Main');
}
render() {
return null;
}
}
这里的Main
/Main screen
和About
About
是常规的路由和屏幕，而ContactUs
/ContactUsFakeScreen
只是假装是路由和屏幕。点击ContactUs
将触发组件将挂载
，该组件将处理电子邮件屏幕和en最终导航到Main屏幕
（Main
路线）
另一种方法可能是从抽屉路由器劫持getStateForAction
，并在那里放置一些额外的路由逻辑，动态地替换目标路由
const defaultDrawerGetStateForAction = drawer.router.getStateForAction;
drawer.router.getStateForAction = (action, state) => {
let newState = defaultDrawerGetStateForAction(action, state);
if (action.type === 'Navigation/NAVIGATE' && action.routeName === 'ContactUs') {
// extra logic here ...
newState.routes.forEach(r => {
if (r.key === 'DrawerClose') {
// switching route from ContactUs to Main.
r.index = 0;
}
});
}
return newState;
}
如果抽屉列表中的某个项目甚至不可操作（如版权），那么假屏幕将看起来更简单（注意通过导航选项设置样式）
：
let drawer=DrawerNavigator({
...
版权所有：{
屏幕：版权所有，
},
});
类版权扩展了React.Component{
静态导航选项={
抽屉标签：（{tintColor，focused}）=>
（复印件