自定义DrawerNavigator - ReactNative

我有我的侧面菜单通过DrawerNavigator。我知道要定制抽屉，它在“contentComponents”道具中。自定义DrawerNavigator - ReactNative

我想例如，把一个按钮谁像打开一个模式：共享（分享其他社交媒体应用程序）

但现在，我所有的按钮都路线。所以如果我点击它，它会重定向到页面（正常）。我只想添加一个反应而不重定向的按钮。

我不知道如何在组件中自定义动态。我想到了每个按钮的硬编码（一些用于重定向，一些用于显示简单的模式）。

这里是我的代码：

index.android.js

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} /> 
       ); 
     } 
    }

我使用 '反应导航'。

来源

2017-08-09 Erased

我正在看同样的任务。我认为有多条路线指向相同的屏幕类型可能最终导致状态管理混乱，因为每个屏幕实例都不同。

查看DrawerSidebar/DrawerNavigatorItems中的源代码，似乎侧边栏列表中的所有项目都是在抽屉的路由配置中找到的项目（除非我们完全改写DrawerNavigatorItems）。因此，也许我们可能会为某些路线设置虚假屏幕，并在componentWillMount实施所需的操作，然后导航至默认路线。

下面是一个示例代码：

let drawer = DrawerNavigator({ 
    Main: { 
    screen: MainScreen, 
    }, 
    About: { 
    screen: AboutScreen, 
    }, 
    ContactUs: { 
    screen: ContactUsFakeScreen, 
    }, 
}); 

const mailUrl = "mailto:[email protected]"; 

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这里/ MainScreen和About/AboutScreen是定期航线和屏幕，而ContactUs/ContactUsFakeScreen只假装是一个途径，并在屏幕。点击ContactUs将触发componentWillMount，它将处理电子邮件屏幕，然后导航至MainScreen（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; 
    }

如果在抽屉列表中的项目甚至没有采取行动（如版权），然后伪造屏幕（通过navigationOptions音符造型）看起来更简单：

let drawer = DrawerNavigator({ 
    ... 
    Copyright: { 
     screen: Copyright, 
    }, 
}); 

class Copyright extends React.Component { 
    static navigationOptions = { 
     drawerLabel: ({ tintColor, focused }) => 
       (<Text style={{color: '#999'}}>Copyright 2017</Text>) 
      ) 

    }; 

    componentWillMount() { 
     let { navigation } = this.props; 
     navigation.navigate('Main');   
    } 

    render() { 
     return null; 
    } 
}

来源

2017-08-18 02:02:16 user194715

自定义DrawerNavigator - ReactNative

回答

相关问题