如何从Drawer Navigator中传递功能

时间:2020-11-01 19:07:44

标签: react-native react-navigation navigation-drawer react-navigation-drawer

我正在使用React Navigation v4。我有一个带有三个按钮组件的DrawerNavigator,假设每个按钮在特定页面中调度一个函数

我正在尝试如何将这些功能(如果可能的话)传递给所需的页面,这样我就可以在页面中修饰功能,并在按下抽屉中的按钮时触发该功能

const SettingDrawer = createDrawerNavigator({
    TaskEdit : {
        screen : TaskEditScreen,
        navigationOptions : {
            title : 'Settings',
        },
    },
} , {
   drawerPosition : 'right',
   defaultNavigationOptions : defaultNavOptions,
   contentOptions : {
    activeTintColor : Colors.primary
   },
   contentComponent : (props) =>  <View style = {{marginVertical : 10}}>
      <Button 
      title = 'Set as Done' onPress = {props.done}
        titleStyle  = {{color : 'white' , fontFamily : 'header'}}
        buttonStyle = {{
            backgroundColor : Colors.primary,
            width : '80%',
            marginVertical : 10,
            alignSelf : 'center'
        }}
        icon ={ <Ionicons
        name = {Platform.OS === 'android' ? 'md-done-all' : 'ios-done-all'}
        size = {23}
        color  = 'white'
        style = {{marginRight : 20}}
        />}
        iconContainerStyle = {{marginRight : 10}}
        />
         <Button title = 'Close Task' onPress = {() => props.navigation.navigate('Reminders')}
            titleStyle  = {{color : 'white' , fontFamily : 'header'}}
            buttonStyle = {{
                backgroundColor : Colors.primary,
                width : '80%',
                marginVertical : 10,
                alignSelf : 'center'
            }}
            icon = {
                <Ionicons
                name = {Platform.OS === 'android' ? 'md-close' : 'ios-close'}
                size = {23}
                color  = 'white'
                style = {{marginRight : 20}}
                />
            }
            iconContainerStyle = {{marginRight : 10}}
            />
            <Button 
            {...props}
            title = 'Cancel' onPress = {() => props.navigation.toggleDrawer(
            )} 
                titleStyle  = {{color : 'white' , fontFamily : 'header'}}
                buttonStyle = {{
                    backgroundColor : Colors.primary,
                    width : '80%',
                    marginVertical : 10,
                    alignSelf : 'center'
                }}
            />
   </View>
})

0 个答案:

没有答案